Typeahead onSelect no longer works

Support
#1

Hello,
I’m not sure when it happened but all of our typeahead select components onSelect() functions no longer work. We haven’t touched this code in over a year. The function is simply not called anymore. The other callbacks seem to work fine, but not onSelect() You can use a bogus function name, whatever, it’s just not called. I’ve had this confirmed by other colleagues.

We are using:

“@patternfly/react-core”: “^4.276.6”,

Is anyone else seeing this behavior?

#3

Hi @marcus2376 - can you share which components you are using for the typeahead and specifically the onSelect that is giving you an issue?

I am seeing that the SearchInput component changed to have onChange(event, newValue) vs onChange(newValue, event), but this would be an issue with typing and not selecting.

#4

Hi @gitdallas here ya go:


this.onSelect = (event, selection) => {
    console.log("MARK onSelect!");  // We never get here
    ...
 }

  <Select
        variant={SelectVariant.typeahead}
        typeAheadAriaLabel="Type an attribute to check"
        onToggle={this.onSelectToggle}
        onClear={this.onSelectClear}
        onSelect={this.onSelect}
        selections={this.state.passworduserattributes}
        isOpen={this.state.isSelectOpen}
        aria-labelledby="typeAhead-user-attr"
        placeholderText="Type attributes to check..."
        noResultsFoundText="There are no matching attributes"
    >
        {this.props.attrs.map((attr, index) => (
            <SelectOption
                key={index}
                value={attr}
            />
        ))}
    </Select>

Originally i was using typeaheadMulti, but it seems all variants don’t work for me.

#5

I’m not sure what is wrong. It seems to work fine here PatternFly 4 • Select

Are you seeing any console errors? Would it be possible to create a codesandbox?

#6

No console errors, onSelect() is basically acting like a no op. If it works for you then it must be something on our side. And I just found one area in our code where typeahead is working, so my issue is not across the board. Anyway it’s not a regression in PF so I will continue to investigate this. Thanks for your time, and we can mark this as completed.

#7

@gitdallas Ok found the problem. So the issue was that the Select component was stored in a variable, and that variable was accidentally used twice on the same page (but in a different Tab). Once the duplicate Select “variable” was removed then everything worked. Thanks again for looking into this!