fix(select): select menu has consistent behavior on input field (#2572)

* fix(select): select menu now opens while typing input

* (select): removed trailing comma

* fix(select): select menu now has correct closing behavior

* fix(select): select menu has consistent behavior on input field

* fix(select): adds updated snapshots

packages/patternfly-4/react-core/src/components/Select/Select.tsx

@@ -128,13 +128,15 @@ export class Select extends React.Component<SelectProps, SelectState> {
     } catch (err) {
       input = new RegExp(e.target.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
     }
+
     const typeaheadFilteredChildren =
       e.target.value !== ''
         ? React.Children.toArray(this.props.children).filter(
             (child: React.ReactNode) =>
               this.getDisplay((child as React.ReactElement).props.value, 'text').search(input) === 0
           )
         : React.Children.toArray(this.props.children);
+
     if (typeaheadFilteredChildren.length === 0) {
       typeaheadFilteredChildren.push(<SelectOption isDisabled key={0} value="No results found" />);
     }
@@ -179,6 +181,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
     keyHandler(index, position, this.refCollection, this.refCollection);
   };
 
+  handleFocus = () => {
+    if (!this.props.isExpanded) {
+      this.props.onToggle(true);
+    }
+  };
+
   handleTypeaheadKeys = (position: string) => {
     const { isExpanded, onSelect } = this.props;
     const { typeaheadActiveChild, typeaheadCurrIndex } = this.state;
@@ -344,6 +352,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                     }
                     type="text"
                     onChange={this.onChange}
+                    onFocus={this.handleFocus}
                     autoComplete="off"
                   />
                 </div>
@@ -374,6 +383,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                     value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
                     type="text"
                     onChange={this.onChange}
+                    onFocus={this.handleFocus}
                     autoComplete="off"
                   />
                 </div>

packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.tsx.snap

@@ -3418,6 +3418,7 @@ exports[`typeahead multi select renders closed successfully 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-multi-typeahead-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value=""
@@ -3629,6 +3630,7 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-multi-typeahead-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value=""
@@ -4228,6 +4230,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-multi-typeahead-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value=""
@@ -4640,6 +4643,7 @@ exports[`typeahead multi select test onChange 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value="test"
@@ -4848,6 +4852,7 @@ exports[`typeahead select renders closed successfully 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value=""
@@ -5058,6 +5063,7 @@ exports[`typeahead select renders expanded successfully 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value=""
@@ -5441,6 +5447,7 @@ exports[`typeahead select renders selected successfully 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value=""
@@ -5819,6 +5826,7 @@ exports[`typeahead select test onChange 1`] = `
             className="pf-c-form-control pf-c-select__toggle-typeahead"
             id="select-typeahead"
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             type="text"
             value="test"