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?
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.
When the user starts to typing something in the v-combobox component, an axios request is sending to search users in the database. The content of the list is updating dynamically. The problem is that when items in the combobox has been updated, it automatically selects the word previously typed by the user and updates v-model (and in my case, it creates a chip on the frontend). How to prevent automatic select when updating items?
You may want to use a v-autocomplete component to get the behaviour you're expecting. You can think of combobox as a select so any input is a change/selection and autocomplete as a text field where input filters the dropdown options.
I solved the problem as follows.
Changed the v-combobox component to v-autocomplete. Made a form for adding a new user. Since v-autocomplete does not allow displaying items outside of the list, I disabled the display of v-model contents using a slot and made a custom display of v-model items using v-chip component with deletion.
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'm using the external filtering and paging features of angular-ui-grid (v3.0.7) to filter and display my data. When I click on the built-in "Clear All Filters" button the filter text boxes get cleared but the data doesn't refresh, which should take me back to my original data set before it got filtered.
Before I updated to v3.0.7, I had my own custom button to clear the filters which, when clicked, called my own function that called the gridApi.grid.clearAllFilters and then pulled the data again so my data would be back the way it was before it got filtered.
Can I get this built-in "Clear All Filters" button to do somehow do the same thing or can I at least hide this button so that I can add my custom button back?
Okay I figured out my issue. I had changed the code so that the calls to the server wouldn't happen until the user clicked the Enter key, instead of each character they typed. This prevented the Clear All Filters button from doing it's job. I've since removed the logic to check for the Enter key and all's well now.
I have to implement a wizard, where each step is a single input field.
Everything is wrapped inside an accordion with section headers.
The user, after filling the input and pressing Enter, should navigate the wizard field by field. Only the current field is editable, while the other ones are readonly (the user can anytime change a previously filled input, by clicking it, moving the current pointer to it).
I was wondering what could be the best approach to design this system, considering that the whole wizard structure changes in dependence of different user inputs.
I have found a tutorial using ui-router (http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router), with a fixed number of steps, but my requirements are to show the current input edit box inside the accordion, not in a fixed "ui-views" placeholder.
Take a look at https://github.com/JustMaier/angular-autoFields-bootstrap
It's a module that allows you to render forms from Metadata. So essentially, you can change the Metadata you provide dynamically to change the forms.