I'm trying to figure out how to work around what appears to be greedy-focus issues with react-select.
I'm using custom components in my MenuList component that need the focus to work (rc-slider). Basically, I'd like the select to support an additional value for each option and I'm using a Slider to do that.
The issue with the sliders is that I can click on them to change the value, but can't drag the handles, as the Select seems to take back the focus (and even close the drop-down if menuIsOpen is not controlled).
The select does need to re-render when the values change, but I can't figure out why the focus has to change.
https://codesandbox.io/s/epic-moon-cv33b
Related
Good evening, i'm using this npm for selecting mutiple values: https://www.npmjs.com/package/react-select
A issue is occurring after choosing multiple values. The select compoment do not show the selected values if I close it and opening it again. The function works but I dont know why the values isn't showing afterwards. I would like to allow a user to see their selected choices and continue to add or remove values without losing it when they close it.
Code here: https://codesandbox.io/s/nice-stonebraker-vx73t?file=/src/App.js
Any reason why?
You cannot wrap the react-select with the MUI select, that's causing the react-select to go on and off from the DOM, and every time it is back it's empty as the state it holds gets reset.
If you check the documentation from MUI select you can tell it is intended to have MenuItem elements inside, not other things.
TL;DR, just don't wrap react-select with the MUI select and you should be fine.
Is there a native MUI event for when the pre-selection value changes in a MUI:Select component?
For example, here is my MUI:Select component with 3 options:
I would like an event for when 'Public', 'Restricted' or 'Private' is pre-selected (but not actually selected; i.e. before the onChange() event), either with a mouse-over event or a keyboard up/down event. This is because I have a tooltip card that needs to change dynamically for the user as they interact with the options.
Using this example https://codesandbox.io/s/3iv96 as a guide, I implemented a bespoke solution by capturing the mouse-over event and extracting the text value. I just realized I have forgotten to handle key up/down.
So the question becomes whether I have just missed the obvious, or do I need to roll my own component by wrapping MUI:Select and publishing the events I need.
Looks like out of the box this isn't supported.
Looking at this thread https://github.com/JedWatson/react-select/issues/745 it has to be done manually.
I am using material-UI autocomplete for a project that involves rendering a dynamic array based on what you select from the menu. I am finished with the project and now trying to implement multi-select to make choosing things from the menu easier. When you have everything you want from the menu, you click an "Add" button that takes everything you currently have selected and adds it to a table (and adds the properly formatted text into a query on the side, the goal is to build queries for users without them worrying about syntax). When I was not using multiselect, and only adding one thing at a time to the query, I was easily able to clear the autocomplete field by changing the value prop to null. This prevents users from adding the same fields to the query over and over (when add is clicked the options that were added are popped from the list of options). When using multi the rules seem to change and now changing value directly causes an error. My question is, does anyone know of a way to programattically click the x button built in to material-ui autocomplete fields to clear that text field in an event handler? Or is there any reliable way of clearing that on my end?
I've added ScaleImageLabel to swipe Tabs. I want to calculate amount of time each tab remains in focus. I added focus listener to Tabs/ScaleImageLabel but it's not getting fired. It's working when added to the form. Any suggestions on how to achieve it?
If I understand correctly what you need is a tab selection listener. Focus listener will only work for focusable components and labels are by default non-focusable. I would recommend avoiding it since focus is used for key based navigation. It might produce different results than you would expect.
I am building a json editor in codenameone. In my current design I need to insert or remove components that have focus when a menu command is pressed. So for instance if i have TextFields inside a Container , I need to determine which textfield has focus when I press the insert menu option so that I can insert another component there.
On the current form (you can get the current form using Display.getInstance().getCurrent()) invoke getFocused(). You can also bind a focus listener using addFocusListener on the form or on the component you want to track.
Notice that with touch device the concept of focus isn't quite the same since focus isn't marked on such devices.