I am able to use the autocomplete by selecting values from the list. Now I want to add a new value in the selection. I tried multiple options including onChange but couldn't implement.
If user types in something and clicks outside the textbox it should convert freetext into a tag. Also, allow user to continue adding more tags from the predefined list/free text.
I am trying out the options here but to no luck. Is this even possible or do I need to look for other options?
In order to add new items with the Autocomplete you should use the freeSolo property of the Autocomplete. This feature gives you an option to automatically use the value from the input and add it into the value of the Autocomplete.
The issue that you have with the freeSolo is when you have complex objects (and not just strings).
There are multiple ways to solve this.
Option #1 - If the complex objects are only the pre-existing values, you can use this in order to display the correct values:
<Autocomplete
freeSolo
getOptionLabel={option => option.title || option}
...
/>
If you don't have option.title (which is the case for the default freeSolo because the value is just the text, and not an object) - just show the option.
You can find here a working example: https://codesandbox.io/s/mui-autocomplete-create-complex-4mk5v?file=/demo.js
Option #2 - if you do need complex objects:
You will need to manage adding/removing the objects by yourself.
The onChange prop of the Autocomplete gets a function that you can use for this.
freeSolo allows you to type freely but it does not allow you to register the value as an option ( https://material-ui.com/api/autocomplete/ look for "autoselect" ). Here's the solution:
<Autocomplete
options={options}
freeSolo
autoSelect
Related
I am using Select component from Antd 3.x library with mode="multiple" and other options as shown in codesandbox link below. The Search is not disabled even when setting showSearch={false}
Now, I can't upgrade to Antd 4.x. The issue is when I use Axe Accessibility tool on my web app, it complains about an extra "Input" in my Select, which doesn't have aria-label set. If I manually set it in chrome console, all is fine
Is there a way to work around this situation either by removing search field(not sure how?) or someway to set the aria-lable of the input to something like aria-lable="search"?
codesandbox link
TIA
You can use filterOption to control your option list.
In my case, my options's value is a list of accounts, which will change every times I input keyword. Option's value is account.id and label is account.name.
filterOption, set it () => true (that means, all of options are OK).
onSearch, I call API to request new list of accounts, which meet with my keyword.
But in your case, I think, set filterOption to () => true will solve your problem.
Hope you solve with my solution!
I am using React Antd v3 & upgrading it to v4, I noticed one issue, where the Autocomplete component was changed & now it is behaving in a weird manner
Passing a json array of [{value: string, label: 123}], everything works well except that on value selection, the value is shown (not the label)
How to show the label instead & keep the value selected as the option value?
Here is a link that shows the problem in a sandbox
Another link where passing array of Options also doesn't work correctly
Note:
It was working well in Ant v3, as shown in this link
You can use key attribute to pass unique Id, and use value as label. And then, use 2 parameters in your onSelect function to retrieve the key or any other attributes.
The first parameter is used to pass the value, and
the second one is used to pass the object of the selected option.
Example data options:
const dataSource = [
{ key: 1, value: "John Doe"},
{ key: 2, value: "Jane Doe"}
]
Example field:
<AutoComplete
options={options}
onSelect={(val, option) => onSelect(val, option)}
onSearch={onSearch}
>
<Input.Search size="large" />
</AutoComplete>
Full code example: codesandbox
According to the docs https://ant.design/components/auto-complete/#components-auto-complete-demo-basic
it's intented to use value when it's uncontrolled and passing options in. if you want the label to be different than the actual value, you have to use
const { Option } = AutoComplete;
and pass the array of Option into Autocomplete's Children
<AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
<Option value="111">Hello</Option>
</AutoComplete>
see https://ant.design/components/auto-complete/#components-auto-complete-demo-options
As indicated in the issue that I have opened on Antd repo, this behaviour is intended in the new version
However, the closest thing to what I needed is the Antd Select with a search option, which does exactly what was needed in my question without any hacks
I am trying to make "required" a TextField in select mode.
I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.
Please check this sandbox
<TextField
id="select-currency"
select
label="Select"
value={this.state.currency}
onChange={this.handleChange("currency")}
required
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
UPDATE: (Clarification really)
I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".
Material Ui provides another component Native Select to handle this kind of native validation.
Please check this example
It was recently implemented in material ui. If you upgrade #material-ui/core to version 4.11.0 it will work https://github.com/mui-org/material-ui/issues/20402
It's not field responsibility to control form behavoiur. It's parent-child relation and top-down data passing.
Form (component) provides current value to component (validity information, change handler) to field component. Field displays content using styles and elements depending on props (* when required, error border etc) but it's form' role to decide about value/validity/submiting.
I am using react-select as a searchable drop-down in my react app.
I am referring this link https://github.com/JedWatson/react-select.
In the drop-down options structure, it needs label and value keys in the respective object in options.
My problem is, I dont have any label or value in my options data.
I am having different keys altogether.
I want the drop-down to be searched by different key tab.
My React version : 15.6.2
react-select version : 1.0.0-rc.10
My code for drop-down:
<Select
name="selectSubTag"
id="selectSubTag"
value={this.state.selectedFilter.subTag}
options={this.state.jobSubTags}
onChange={this.setSubTag}
placeholder="Select Sub Tag"/>
Where my options data looks like below:
this.state.jobSubTags = [
{tab:"tabName 1",tabValue:1},
{tab:"tabName 2",tabValue:2},
{tab:"tabName 3",tabValue:3},
]
and now I want the data to be searched by 'tab' key in the dropdown.
You can use getOptionLabel and getOptionValue :
<Select
name="selectSubTag"
id="selectSubTag"
value={this.state.selectedFilter.subTag}
options={this.state.jobSubTags}
getOptionLabel ={(option)=>option.tab}
getOptionValue ={(option)=>option.tabValue}
onChange={this.setSubTag}
placeholder="Select Sub Tag"/>
By default the react-select searches over value and label, but if you added additional keys it will also include them in the search, so just iterate over the array and append value label keys equal to the tab key or the tabValue key and it will search upon them all, but remember that for display, the react-select displays the label key content
did you try filterProp="tab" and matchProp="label" ?
I'm interested in building a Tag input feature like Stack Overflow where the feature set includes:
Input field which has a autocomplete feature (takes user input, fetches results from the server and displays those results to the user for easy selection.
Input field contains 1 or more selected items as tags.
Suggestions outside of the input which when clicked have the results added to the input field.
Screenshots from Stack Overflow:
I'm using Semantic-UI-React and notice there is a search component which could work: https://react.semantic-ui.com/modules/search
It does not appear that this Semantic-UI-React search component allows for adding more than one result or adding results via a method outside of the input. Am I missing something?
Should I use Semantic UI for this feature or will I need to build this entirely from scratch in my React app?
It's not properly highlighted in the react semantic-ui dropdown documentation but the allowAdditions field will enable tagging capabilities:
<Dropdown search selection multiple allowAdditions />
You need to add the onAddItem prop to update the options list. In here, I did this:
<Dropdown
placeholder='Select Friend'
fluid
search
selection
multiple
allowAdditions
onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})}
options={friendOptions}
/>
And now you can add items to the dropdown list.