SelectField focus fix

igorokb · Sep 7, 2017 · bd9209f · bd9209f
1 parent f96acf1
commit bd9209f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/src/DropDownMenu/DropDownMenu.js b/src/DropDownMenu/DropDownMenu.js
@@ -165,6 +165,10 @@ class DropDownMenu extends Component {
      * Callback function fired when the menu is closed.
      */
     onClose: PropTypes.func,
+    /**
+     * Callback function fired when the menu is opened.
+     */
+     onOpen: PropTypes.func,
     /**
      * Set to true to have the `DropDownMenu` automatically open on mount.
      */
@@ -287,6 +291,9 @@ class DropDownMenu extends Component {
         open: !this.state.open,
         anchorEl: this.rootNode,
       });
+      if (!this.state.open && this.props.onOpen) {
+        this.props.onOpen();
+      }
     }
   };
 
@@ -371,6 +378,7 @@ class DropDownMenu extends Component {
       menuStyle: menuStyleProp,
       selectionRenderer,
       onClose, // eslint-disable-line no-unused-vars
+      onOpen, // eslint-disable-line no-unused-vars
       openImmediately, // eslint-disable-line no-unused-vars
       menuItemStyle,
       selectedMenuItemStyle,

diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
@@ -178,6 +178,27 @@ class SelectField extends Component {
     muiTheme: PropTypes.object.isRequired,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+    this.state.isOpened = false;
+  }
+
+  onOpen = () => {
+    this.setState({isOpened : true});
+    if (this.props.dropDownMenuProps && this.props.dropDownMenuProps.onOpen) {
+      this.props.dropDownMenuProps.onOpen()
+    }
+  }
+
+  onClose = () => {
+    this.setState({isOpened : false});
+    if (this.props.dropDownMenuProps && this.props.dropDownMenuProps.onClose) {
+      this.props.dropDownMenuProps.onClose()
+    }
+  }
+
   render() {
     const {
       autoWidth,
@@ -215,6 +236,12 @@ class SelectField extends Component {
 
     const styles = getStyles(this.props, this.context);
 
+    const {
+      onOpen,
+      onClose,
+      ...otherDropDownMenuProps
+    } = dropDownMenuProps;
+
     return (
       <TextField
         {...other}
@@ -232,6 +259,7 @@ class SelectField extends Component {
         onFocus={onFocus}
         onBlur={onBlur}
         id={id}
+        isFocused={this.state.isOpened}
         underlineDisabledStyle={underlineDisabledStyle}
         underlineFocusStyle={underlineFocusStyle}
       >
@@ -250,7 +278,9 @@ class SelectField extends Component {
           maxHeight={maxHeight}
           multiple={multiple}
           selectionRenderer={selectionRenderer}
-          {...dropDownMenuProps}
+          onOpen={this.onOpen}
+          onClose={this.onClose}
+          {...otherDropDownMenuProps}
         >
           {children}
         </DropDownMenu>

diff --git a/src/TextField/TextField.js b/src/TextField/TextField.js
@@ -175,6 +175,10 @@ class TextField extends Component {
      * When multiLine is true: define the style of the container of the textarea.
      */
     inputStyle: PropTypes.object,
+    /**
+     * Force focus/blur state
+     */
+    isFocused: PropTypes.bool,
     /**
      * If true, a textarea element will be rendered.
      * The textarea also grows and shrinks according to the number of lines.
@@ -403,6 +407,7 @@ class TextField extends Component {
       hintStyle,
       id,
       inputStyle,
+      isFocused,
       multiLine,
       onBlur, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
@@ -429,17 +434,19 @@ class TextField extends Component {
       </div>
     );
 
+    const isFocusedMerged = isFocused === true ? true : (isFocused === false ? false : this.state.isFocused)
+
     const floatingLabelTextElement = floatingLabelText && (
       <TextFieldLabel
         muiTheme={this.context.muiTheme}
         style={Object.assign(
           styles.floatingLabel,
           floatingLabelStyle,
-          this.state.isFocused ? floatingLabelFocusStyle : null
+          isFocusedMerged ? floatingLabelFocusStyle : null
         )}
         shrinkStyle={floatingLabelShrinkStyle}
         htmlFor={inputId}
-        shrink={this.state.hasValue || this.state.isFocused || floatingLabelFixed}
+        shrink={this.state.hasValue || isFocusedMerged || floatingLabelFixed}
         disabled={disabled}
       >
         {floatingLabelText}
@@ -503,8 +510,8 @@ class TextField extends Component {
         {hintText ?
           <TextFieldHint
             muiTheme={this.context.muiTheme}
-            show={!(this.state.hasValue || (floatingLabelText && !this.state.isFocused)) ||
-                  (!this.state.hasValue && floatingLabelText && floatingLabelFixed && !this.state.isFocused)}
+            show={!(this.state.hasValue || (floatingLabelText && !isFocusedMerged)) ||
+                  (!this.state.hasValue && floatingLabelText && floatingLabelFixed && !isFocusedMerged)}
             style={hintStyle}
             text={hintText}
           /> :
@@ -517,7 +524,7 @@ class TextField extends Component {
             disabledStyle={underlineDisabledStyle}
             error={!!this.state.errorText}
             errorStyle={errorStyle}
-            focus={this.state.isFocused}
+            focus={isFocusedMerged}
             focusStyle={underlineFocusStyle}
             muiTheme={this.context.muiTheme}
             style={underlineStyle}