The Select component (https://react-select.com) always focuses the input when opening the dropdown. This is not wanted when on mobile because it causes the virtual keyboard to always open.
We want the user to be able to tap the dropdown indicator icon on the right on the Select component and see the options without focusing the input, but, if the user taps the area over the input then the focus is given to the input field.
*edit: github.com issue related - https://github.com/JedWatson/react-select/issues/3526
Have you tried using the isSearchable prop and setting it to false?
You can test this functionality on the first example of www.react-select.com
Click on Select, see keyboard
Now uncheck "Searchable", click select, and you should be focused without a keyboard.
I included images in the referenced react-select issue.
Related
Dears,
I have implemented a pop-up window to be shown by clicking a trigger-button of a textbox, and it has a radioGroup in it. in some cases I have to check the radio based on user input.
The problem is that if I try to invoke radioGroup.setValue() before opening the popup once, I face with two selected items in radioGroup. The issue doesn't occur if open-close the popup before trying to set the checked radio.
Is it a rendering issue or something like that?!
After selecting a field, how can I immediately click on a different field to have it focused without having to click it twice? Is there a prop in Material-UI that can disable this behavior?
Here's a link to the sample code
https://codesandbox.io/s/material-demo-forked-cekgv?file=/demo.js
Using CodenameOne,
I have a Form that the user needs to fill in. All of the components, however, are actually Containers that represent custom functionality. As an example, I would have a TextField alongside a Button on a Container, and I would use that Container as a "Component". This allows me to create more advanced functionality by combining existing Components.
A good example of where this is necessary is that of a custom date entry field existing out of 3 TextFields or a combination of TextFields and ComboBoxes.
I have a "Field" that has functionality for that of a Contact Component.
This all serves as a single "Unit" in order to allow the user to choose a contact or fill in their own. Buttons open Dialog popups, etc.
My problems comes with when the user uses the Android keyboard. Should this Contact Object be the second "Field" and the user presses the 'Next' button on the Android keyboard, the App does not know what field to give focus.
Furthermore, If one of the fields are a ComboBox or a Button and the user presses next to reach that Component, the keyboard doesn't close, and instead removes the 'Next' button, replacing it with a return button or an emoticon selector.
Below is an example situation:
The user would press on the first field, the Keyboard shows up, and when the user presses next, the keyboard's Next button dissapears, as the immediate next field happens to be a Button or ComboBox.
Is there a way to change the focusing index, or omit certain fields form ever gaining focus in this way? I tried making the entire thing a Component but that doesnt allow me to combine other Components. Even if it is possible to make the parent Container a Component, how would I solve this particular issue?
The default behavior is to use the "next focus down" for this functionality so just use setNextFocusDown(nextTextField) on each one of the components. Notice that a ComboBox won't work as expected although you might want to change that to an AutoCompleteTextField which would.
I am trying to have a small form in my menu item. I have split button that has one item. In that item I have form: datefield, textfield, button, etc...
The issue is connected with some keystrokes such as left arrow, right arrow. This key events are supposed to hide menu item by default. Now I need to disable them since every time an arrow button is used in my textfield, it hides the menu.
I am using beforehide event, but cannot find a way to achieve to my goal. I could not find any events similar to keydown to handle this case.
One more key backspace is also used for editing the textfield, but this one redirects the browser.
IN SHORT: I want to be able to freely use the keyboard in my menu item's textfield without hiding it. Is this possible?
Just use enableKeyNav: false in the menu configuration. From the doc:
enableKeyNav : Boolean
True to enable keyboard navigation for
controlling the menu. This option should generally be disabled when
form fields are being used inside the menu.
Defaults to: true
In the iPhone ADF mobile app I have a textinput field and a "Save" commandbutton. In the properties for the commandbutton I have the disabled condition set (like if the textinput field is null). This works fine. In the beginning the save button is disabled and when I enter any text with a keyboard the button is automatically enabled and vice versa.
The only issue is my users can enter the text via voice too. If they use the voice to fill the text field - still the save button is not enabled. As soon as they change anything using key board it is enabled.
How do I set the command button properties to check this please?
In the InputText properties there is a property called Value Change Listener,
add a java method to it to check if the value is null or not then try one of the below:
Reset the InputText value as this will fire the propertyChangeListner and may activate your button.
Disable or Enable your button in code according to the value.
Hope this help.