Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Select typeahead shows selected value instead of text on some renders
See original GitHub issueHi, 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:
- Click on the select’s arrow to see the available options
- Click on one of the options to select it → a different text (the value) appears as the selection in the input at the top
- 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 - 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).
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:8 (6 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Hi @rkaw92 and @knokit
I believe I figured out what is happening.
Background
Select stores
TypeaheadInputValuein its states to keep track on what option is hovered when you navigate with arrow keys or mouse. Theselectionsprops is the one that handles what option/s was/were selected.The flow:
When an option is selected in the first time,
props.selectionswill contain the value (e.g.FL) and not the labelFloridabecause that was is set by the user. Due to the change in the props,componentDidUpdateis being called and changestypeaheadInputValueto the newprops.selections-FL. When we render the value that is displayed in the select box we check thattypeaheadInputValueis notnull. If it isnullwe show the current value usinggetDisplayotherwise we showtypeaheadInputValue. When we select again the same option from the menu, the menu is closed which resets thetypeaheadInputValuetonulland even thoughcomponentDidUpdateis called again this time becauseprops.selectionswas not changed,typeaheadInputValueis not set and isnullwhich 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. throughsetTimeout). However, it looks like it was fixed in a better way and not by updating thetypeaheadInputValue.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:
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:
Edit
I figured out why my demo-app failed running. Anyway, running integration tests passed. So I am going to push this change soon.
@boaz0 Hi, I agree with your assessment of the problem. This would also explain why it was not occurring in typeaheadMulti instances. Thanks!