diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.tsx b/packages/patternfly-4/react-core/src/components/Select/Select.tsx index 87eeec53575..cab4e3289f1 100644 --- a/packages/patternfly-4/react-core/src/components/Select/Select.tsx +++ b/packages/patternfly-4/react-core/src/components/Select/Select.tsx @@ -128,6 +128,7 @@ export class Select extends React.Component { } catch (err) { input = new RegExp(e.target.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i'); } + const typeaheadFilteredChildren = e.target.value !== '' ? React.Children.toArray(this.props.children).filter( @@ -135,6 +136,7 @@ export class Select extends React.Component { this.getDisplay((child as React.ReactElement).props.value, 'text').search(input) === 0 ) : React.Children.toArray(this.props.children); + if (typeaheadFilteredChildren.length === 0) { typeaheadFilteredChildren.push(); } @@ -179,6 +181,12 @@ export class Select extends React.Component { 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 { } type="text" onChange={this.onChange} + onFocus={this.handleFocus} autoComplete="off" /> @@ -374,6 +383,7 @@ export class Select extends React.Component { value={typeaheadInputValue !== null ? typeaheadInputValue : ''} type="text" onChange={this.onChange} + onFocus={this.handleFocus} autoComplete="off" /> diff --git a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.tsx.snap index 38f13e6b0bf..c13c41e2e98 100644 --- a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.tsx.snap +++ b/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"