Create option should be selectable without use of mouse
MegaKeegMan opened this issue · comments
The major blocker that I have with this library is that I cannot select the "create" (item) selection without using my mouse. Nor is it selectable in the tab sequence.
It would be 100% amazing if there was an easy way to select the create option. Arrow keys would be great, but the "create" option should probably be near the top of the list in that case. As an alternative, pressing a certain key to create a new option would be nice, like tab perhaps. I considered comma, but it is unfortunate in cases where a comma is needed in the text of the selection. Maybe an even further future consideration, but this sort of configuration could be exposed via the api.
@MegaKeegMan good catch, will see if I can fix this, also PR is welcome as well :)
@harshzalavadiya Sure I will give it a go, and let you know if I have any questions.
Actually @harshzalavadiya do you have an idea of how you expect to implement #529 ? My intuition for an MVP on this issue is to implement the arrow key functionality for the "create" option. Any thoughts or preferences before I get started (based on how this might interact with mentioned issue)?
@MegaKeegMan I think for #529 we can modify isCreatable to accept custom function as well instead of just boolean so if function returns true than creatable is allowed and if false then it's not, if it's not function then behaviour will be to fallback to explicitly true check
if (prop.isCreatable === true) {
// Current value check code
} else if (props.isCreatable === "function check") {
// check if prop is function and than
}for without clicking unable to create it's probably not having focus index not properly set issue
@harshzalavadiya I am having some complications unfortunately. So I cloned this repo, and set up a fresh react project. Then I did:
npm linkfrom the library reponpm link react-multi-select-componentfrom the project reponpm run devfrom the library repo- and started up the app
Unfortunately when I do all of this, my React app stops working and I get these errors:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
Uncaught TypeError: dispatcher is null
useState React
MultiSelectProvider index.js:75
...
The above error occurred in the <MultiSelectProvider> component:
MultiSelectProvider@http://localhost:3000/static/js/bundle.js:474:7
MultiSelect@http://localhost:3000/static/js/bundle.js:1097:22
div
Component@http://localhost:3000/static/js/bundle.js:150:82
div
App@http://localhost:3000/static/js/bundle.js:45:82
Do you have any tips on what I am doing wrong? This does not happen when I install the library regularly. I am doing this on a fresh npx create-react-app my-app --template typescript
@MegaKeegMan I'll recommend using vite instead of Create React App since it's not very actively updated,
also there's no need to seprately setup other repo to test this, you can use existing storybook dev environment to do the same thing easily
Excellent, okay I am set up to develop now. Thank you. I did run into an error that seemed to be related to using node v17, but found a quick solution here: https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported.
Specifically, I followed option 2 in the most popular answer there.
@harshzalavadiya thanks very much for the responsiveness. Unfortunately, though the code I submitted does seem to work on the storybook components, it does not quite work as I want while integrating the component into my app. I will poke around a bit to see if I can identify the differences. But mainly, I seem to be able to tab my way to the create option, which is good, but I cannot get to it using the arrow keys like I can in the storybook creatable.
I took a look at the rendered markup of the storybook vs my app.
Here is the creatable list item on my app:
<li class="select-item creatable" tabindex="0">
Here is the creatable list item on the storybook:
<li class="select-item creatable" tabindex="1">Create "dfsafafa"</li>
On my app, I have select all disabled, and that may be the reason. But the search also has a tab index of 0. I expect this is the cause of the failure... As I typed this I went to check, and indeed it does work on my app when select all is disabled.
@harshzalavadiya this is all set. One thing that is a bit funny, but is not anything new, is that you can continue setting the focus index for as many options are available. So if you press "down" twice from your search, despite there only being one visible item in the list (the create item), you will have to press "up" twice to get back to having the search in focus. Maybe that can be a new issue, but the new MR above at least resolves this one.
Released v4.3.2