Results 1 to 3 of 3

Thread: Submit button not calling handler when return key pressed

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Join Date
    Mar 2017
    Posts
    14
    Vote Rating
    1
      0  

    Default Submit button not calling handler when return key pressed

    I have a Login component that contains a "submit" button. The button that gets created in the DOM is of type "button" not "submit" and pressing the Enter key does not call the button's handler. Below is the code for the component. Am I coding this wrong?

    Code:
    import * as React from 'react';
    import { connect } from "react-redux";
    import {
        Container,
        Button,
        FormPanel,
        FieldSet,
        TextField,
        PasswordField,
        Toolbar,
        Label,
        Spacer
    } from '@extjs/ext-react';
    import actions from '../../actions';
    import AppState from '../../types/state';
    import { NestedStringMap } from '../../types/common';
    import { pick } from '../../utils/utils';
    
    interface LoginActions {
        loginUserNameChanged: typeof actions.loginUserNameChanged;
        loginUserPasswordChanged: typeof actions.loginUserPasswordChanged;
        resetLoginForm: typeof actions.resetLoginForm;
        authenticate: typeof actions.authenticate;
    }
    
    interface LoginProps {
        loginUserName: string;
        loginUserPassword: string;
        loginFormValid: boolean;
        loginFailed: boolean;
        resources: NestedStringMap;
    }
    
    class LoginMainView extends React.Component<LoginActions & LoginProps, {}> {
    
        onLoginUser = () => {
            this.props.authenticate(this.props.loginUserName, this.props.loginUserPassword);
        }
    
        onResetLoginForm = () => {
            this.props.resetLoginForm({});
        }
    
        render() {
            return (
                <Container
                    shadow
                    layout={{
                        type: 'vbox',
                        align: 'center',
                        pack: 'center'
                    }}
                >
                    <FormPanel
                        shadow
                        width={600}
                        height={300}
                        align='center'
                        padding="20"
                    >
                        <FieldSet>
                            <Container layout="hbox">
                                <Spacer />
                                <Label
                                    html={this.props.resources.loginTitle as string}
                                    style={{
                                        fontSize: "1.5em",
                                        fontWeight: "bold"
                                    }}
                                    margin={5}
                                />
                                <Spacer />
                            </Container>
                            <TextField
                                labelAlign="placeholder"
                                label={this.props.resources.userNameLabel as string}
                                value={this.props.loginUserName}
                                onChange={(me, loginUserName) => this.props.loginUserNameChanged({ loginUserName })}
                            />
                            <PasswordField
                                labelAlign="placeholder"
                                label={this.props.resources.userPasswordLabel as string}
                                revealable
                                value={this.props.loginUserPassword}
                                onChange={(me, loginUserPassword) => this.props.loginUserPasswordChanged({ loginUserPassword })}
                            />
                            <Container
                                layout="center"
                                padding={10}
                                hidden={!(this.props.loginFailed)}
                                style={{
                                    color: 'red'
                                }}
                            >
                                {this.props.resources.failed}
                            </Container>
                        </FieldSet>
    
                        <Toolbar
                            docked="bottom"
                            layout={{
                                type: 'hbox',
                                pack: 'center'
                            }}
                        >
                            <Button
                                type="submit"
                                text={this.props.resources.loginUserAction as string}
                                margin="0 10 0 0"
                                disabled={!(this.props.loginFormValid)}
                                handler={() => this.onLoginUser()}
                            />
                            <Button
                                text={this.props.resources.resetValuesAction as string}
                                handler={() => this.onResetLoginForm()}
                            />
                        </Toolbar>
    
                    </FormPanel>
    
                </Container>
            );
        }
    }
    
    function mapStateToProps(state: AppState): LoginProps {
        const { nameCurrentValue, passwordCurrentValue, failed } = state.loginState;
        return {
            loginUserName: nameCurrentValue,
            loginUserPassword: passwordCurrentValue,
            loginFormValid: !!(nameCurrentValue && passwordCurrentValue),
            loginFailed: failed,
            resources: state.resources.login as NestedStringMap
        };
    }
    
    const loginActions: LoginActions = pick(
        actions,
        'loginUserNameChanged',
        'loginUserPasswordChanged',
        'resetLoginForm',
        'authenticate'
    );
    
    const connectModule = connect<LoginProps, LoginActions>(
        mapStateToProps,
        loginActions
    )(LoginMainView);
    
    export default connectModule;
    
    

  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,577
    Vote Rating
    81
      0  

    Default

    You need to configure the buttonType as type does not exist as a prop.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  3. #3

    Join Date
    Mar 2017
    Posts
    14
    Vote Rating
    1
      0  

    Default

    Hi Tristan,

    Thanks for the code review. I have made the change and the code now works as expected!

    Paul

Similar Threads

  1. Replies: 1
    Last Post: 16 Jul 2014, 10:53 AM
  2. [FIXED] Ext.device.notification.PhoneGap does not return pressed button in lowercase
    By fokkezb in forum Sencha Touch 2.x: Bugs
    Replies: 2
    Last Post: 14 May 2012, 2:07 PM
  3. [SOLVED] Toggle button's pressed parameter return an object
    By ironlion in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 5 Aug 2010, 9:22 PM
  4. Problem calling button handler directly
    By elliottmina in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 10 Feb 2009, 9:23 AM
  5. Calling the handler of a button
    By fgerneth in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 24 Jan 2008, 2:11 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •