show form inside select if nothing matches #4131

Activity

1. ebonow commented on Jul 18, 2020

   

   ebonow

   on Jul 18, 2020

   Last edited by ebonow

   Collaborator

   More actions

   Greetings @codelover2k

   If I understand correctly, you want to allow the user to add a new user if there are no matching entries correct? For this there's at least 3 possible solutions

   1. There is a CreatableSelect which should be able to do this.

   2. You could write a custom component for the NoOptionsMessage. You'd likely want to include a button or onClick handler to identify when a user clicks on it.

   3. Potentially you could also create a custom Menu component and verify that there are children, but if not, create a custom option.

   For the final part of this in collecting additional data, you'd likely want to use a modal or popup for this to collect that information. If you did want to use the Menu, you could create a custom Menu that renders its children by default or shows your custom form based on some conditional. You'd likely want to control menuIsOpen using true or undefined if you want to close it (false will keep it permanently closed)

   Hope this gives you some direction. Let me know if you have questions. If not please feel free to close this
2. ebonow commented on Jul 18, 2020

   

   ebonow

   on Jul 18, 2020

   Collaborator

   More actions

   Thinking a bit more about this, maybe it's possible to simply replace the NoOptionsMessage component with the form you have in mind. Might be worth a shot
3. codelover2k commented on Jul 20, 2020

   

   codelover2k

   on Jul 20, 2020

   Author

   More actions

   hi ebonow, thanks for the help and response!

   I created this sanbox and at the moment I have problem to insert data in the input fields, I do not know why
   https://codesandbox.io/s/beautiful-varahamihira-2ytrm?file=/src/App.js
4. ebonow commented on Jul 20, 2020

   

   ebonow

   on Jul 20, 2020

   Last edited by ebonow

   Collaborator

   More actions

   @codelover2k

   Thanks for the Sandbox. It's much easier to help when the example is there.

   There are two problems when it comes to inserting data into the input fields...

   1. The default behavior of react-select is to remove the input text when the input loses focus which is exactly what happens when you try to tab into the next input.

   You can update the onChange function to handle the input-blur action to ensure you do not lose your inputValue similar to this example. In your case, you might want to add a conditional to verify the activeElement is in the menu.

   2. The other default behavior of react-select that is getting in your way is the mouseDown handler on the Menu.

     onMenuMouseDown = (event: SyntheticMouseEvent<HTMLElement>) => {
       if (event.button !== 0) {
         return;
       }
       event.stopPropagation();
       event.preventDefault();
       this.focusInput();
     };
   

   This would explain why clicking into the inputs seemingly doesn't do anything. It simply returns the focus back to the original input.

   For this, you would likely want to create a custom Menu component with its own derived mouseDown function which checks that the event.target is one of your inputs. Something probably like...

   import { components } , Select from 'react-select';
   
   const Menu =({ innerProps, ...props }) => {
     const onMouseDown = e => e.target.type !== 'input' && innerProps.onMouseDown(e);
     return <component.Menu {...props} innerProps={{...innerProps, onMouseDown }} />
   }
   
   return <Select components={{ Menu }} />
   

   Your last issue in all of this is keeping the menu open. If you blur focus from the input, the menu will close. You would need to add some logic to ensure it stays open using the menuIsOpen prop. You would be responsible for closing it though as indicated above.

   Hope this helps

   👍React with 👍2Reacted by Almas Akchabayev and Rafael Pereira
5. bladey

   added

   awaiting-author-responseIssues or PRs waiting for more information from the authorIssues or PRs waiting for more information from the author

   category/question

   issue/reviewedIssue has recently been reviewed (mid-2020)Issue has recently been reviewed (mid-2020)

   on Jul 21, 2020
6. bladey

   added

   issue/reviewedIssue has recently been reviewed (mid-2020)Issue has recently been reviewed (mid-2020)

   and removed

   issue/reviewedIssue has recently been reviewed (mid-2020)Issue has recently been reviewed (mid-2020)

   on Aug 24, 2020
7. ebonow commented on Dec 3, 2020

   

   ebonow

   on Dec 3, 2020

   Collaborator

   More actions

   It's been a while without a reply so we will close this for now to focus on more recent issues. Please feel free to reply if there is anything else as this can always be reopened later if your issue persists.
8. ebonow

   closed this as completedon Dec 3, 2020