Patternfly-react: Select typeahead shows selected value instead of text on some renders

[rkaw92]

Hi, I'm experiencing an issue: with a Select of the typeahead (single) variant, the first render after making a selection displays the item's value, not its textContent, as the "typeaheadValue" inside the input. However, the second render replaces the value with the proper text.

From the user's perspective, it looks like this:

1. Click on the select's arrow to see the available options
2. Click on one of the options to select it → a different text (the value) appears as the selection in the input at the top
3. Click outside the select to close it → the proper text (the textContent between <SelectOption> and </SelectOption>) appears as the selection - this is what the user expects from the beginning
4. Alternatively, clicking the same option twice has the same result - on the second render, the option's text, not value, is rendered

I think it has something to do with this fix: https://github.com/patternfly/patternfly-react/pull/3096
The linked change appears to "fix" setting the selections from outside by using the selections value as the type-ahead text. However, this seems to assume that the value and the displayed option text are always the same, which looks like an unreasonable assumption to make.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Here's a minimal example that shows the weird behavior: https://codesandbox.io/s/unruffled-chandrasekhar-idl9j?file=/src/App.tsx

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
This is a bug that has no work-around that I know of, as having a different option value and option text is absolutely necessary (values are often not human-readable).

Is there any other way to make this work? I've tried not setting selections and letting the Select component manage this internally, but this results in the input not updating at all (i.e. no user feedback as to which option is selected).

What is your product and what release version are you targeting?
Our product is an admin-type GUI and we're on react-core 3.153.3, though this is reproducible on newer versions also (as seen in the sample code linked above).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[boaz0]

Ping @rkaw92 - can you update PF4 to the latest and see if this can be reproduced.
I think this https://github.com/patternfly/patternfly-react/pull/4503 fixes it.

[knokit]

Hi. I have a similar issue, tested it with the latest PF4 and it's still reproducible.

Here's an example: https://codesandbox.io/s/pf-select-typeahead-issue-heu9y

[boaz0]

@knokit thank. I will review this.

[boaz0]

ping @tlabaj can you reopen and assign it to me? :pray:

[boaz0]

Thanks @KKoukiou

[boaz0]

Hi @rkaw92 and @knokit

I believe I figured out what is happening.

Background

Select stores TypeaheadInputValue in its states to keep track on what option is hovered when you navigate with arrow keys or mouse.
The selections props is the one that handles what option/s was/were selected.

The flow:

When an option is selected in the first time, props.selections will contain the value (e.g. FL) and not the label Florida because that was is set by the user.
Due to the change in the props, componentDidUpdate is being called and changes typeaheadInputValue to the new props.selections - FL.
When we render the value that is displayed in the select box we check that typeaheadInputValue is not null. If it is null we show the current value using getDisplay otherwise we show typeaheadInputValue.
When we select again the same option from the menu, the menu is closed which resets the typeaheadInputValue to null and even though componentDidUpdate is called again this time because props.selections was not changed, typeaheadInputValue is not set and is null which later display the correct value.

To me, it seems like, the main reason for this problem is the checking in componentDidUpdate. Looking in the history, its purpose was to update the selection without interacting with the menu (f.e. through setTimeout). However, it looks like it was fixed in a better way and not by updating the typeaheadInputValue.

All in all, I removed that checking and verified that @SpyTec sandbox is working even now. In addition, ran unit tests to make sure this doesn't break anything else and fixes the problem represented here.

I tried to run integration tests but the demo-apps is failing

Html Webpack Plugin:

Error: Child compilation failed:
Module build failed (from /home/bshuster/Documents/projects/patternfly-react/n ode_modules/react-scripts/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /home/bshuster/Documents/projects/patternfly-react/node_modules /react-scripts/node_modules/webpack/buildin/global.js: Cannot find module '@ba bel/helper-create-regexp-features-plugin'
Require stack:

• /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-preset -react-app/node_modules/@babel/plugin-transform-dotall-regex/lib/index.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-preset -react-app/node_modules/@babel/preset-env/lib/available-plugins.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-preset -react-app/node_modules/@babel/preset-env/lib/index.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-preset -react-app/dependencies.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/@babel/core/lib/config/files/plugins.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/@babel/core/lib/config/files/index.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/@babel/core/lib/index.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/babel-loader/lib/index.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/loader-runne r/lib/loadLoader.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/loader-runne r/lib/LoaderRunner.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/webpack/lib/NormalModule.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/webpack/lib/NormalModuleFactory.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/webpack/lib/Compiler.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/node_modules/webpack/lib/webpack.js
• /home/bshuster/Documents/projects/patternfly-react/node_modules/react-script s/scripts/start.js (While processing: "/home/bshuster/Documents/projects/patte rnfly-react/node_modules/babel-preset-react-app/dependencies.js")

• loader.js:965 Function.Module._resolveFilename
  internal/modules/cjs/loader.js:965:15

• loader.js:841 Function.Module._load
  internal/modules/cjs/loader.js:841:27

• loader.js:1025 Module.require
  internal/modules/cjs/loader.js:1025:19

• helpers.js:72 require
  internal/modules/cjs/helpers.js:72:18

• index.js:8 Object.
  [patternfly-react]/[babel-preset-react-app]/[@babel]/plugin-transform-dotall -regex/lib/index.js:8:41

• loader.js:1137 Module._compile
  internal/modules/cjs/loader.js:1137:30

• loader.js:1157 Object.Module._extensions..js
  internal/modules/cjs/loader.js:1157:10

• loader.js:985 Module.load
  internal/modules/cjs/loader.js:985:32

• loader.js:878 Function.Module._load
  internal/modules/cjs/loader.js:878:14

• loader.js:1025 Module.require
  internal/modules/cjs/loader.js:1025:19

• helpers.js:72 require
  internal/modules/cjs/helpers.js:72:18

• available-plugins.js:21 Object.
  [patternfly-react]/[babel-preset-react-app]/[@babel]/preset-env/lib/availabl e-plugins.js:21:29

• loader.js:1137 Module._compile
  internal/modules/cjs/loader.js:1137:30

• loader.js:1157 Object.Module._extensions..js
  internal/modules/cjs/loader.js:1157:10

• loader.js:985 Module.load
  internal/modules/cjs/loader.js:985:32

• Error: [BABEL] /home/bshuster/Documents/projects/patternfly-react/node_modul es/react-scripts/node_modules/webpack/buildin/global.js: Cannot find module '@babel/helper-create-regexp-features-plugin'

• Require stack:

• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/node_modules/@babel/plugin-transform-dotall-regex/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/node_modules/@babel/preset-env/lib/available-plugins.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/node_modules/@babel/preset-env/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/dependencies.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/@babel/core/lib/config/files/plugins.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/@babel/core/lib/config/files/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/@babel/core/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/babel-loader/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/loader-run ner/lib/loadLoader.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/loader-run ner/lib/LoaderRunner.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/NormalModule.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/NormalModuleFactory.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/Compiler.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/webpack.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/scripts/start.js (While processing: "/home/bshuster/Documents/projects/p atternfly-react/node_modules/babel-preset-react-app/dependencies.js")

• Module build failed (from /home/bshuster/Documents/projects/patternfly-react /node_modules/react-scripts/node_modules/babel-loader/lib/index.js):

• Error: [BABEL] /home/bshuster/Documents/projects/patternfly-react/node_modul es/react-scripts/node_modules/webpack/buildin/module.js: Cannot find module '@babel/helper-create-regexp-features-plugin'

• Require stack:

• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/node_modules/@babel/plugin-transform-dotall-regex/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/node_modules/@babel/preset-env/lib/available-plugins.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/node_modules/@babel/preset-env/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/babel-pres et-react-app/dependencies.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/@babel/core/lib/config/files/plugins.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/@babel/core/lib/config/files/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/@babel/core/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/babel-loader/lib/index.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/loader-run ner/lib/loadLoader.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/loader-run ner/lib/LoaderRunner.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/NormalModule.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/NormalModuleFactory.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/Compiler.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/node_modules/webpack/lib/webpack.js
• • /home/bshuster/Documents/projects/patternfly-react/node_modules/react-scri pts/scripts/start.js (While processing: "/home/bshuster/Documents/projects/p atternfly-react/node_modules/babel-preset-react-app/dependencies.js")

Edit

I figured out why my demo-app failed running. Anyway, running integration tests passed. So I am going to push this change soon.

[rkaw92]

@boaz0 Hi, I agree with your assessment of the problem. This would also explain why it was not occurring in typeaheadMulti instances. Thanks!