I basically want to use react select with no options/dropdown (just like an input field) but use the multi feature available in select
so I figured something like this:
<Select
components={{ DropdownIndicator: () => null }}
placeholder="Start typing to enter options"
multi
/>
but this just gives me no options in the dropdown
how can I achieve this?
You might try adding an options={[]} prop, at least we achieve what you say doing that in our UI doing that. Adding some sort of "Add value" button input in the dropdown that enables the isMulti and then just passing the empty options.
https://react-select.com/props#prop-types
According to the oficial documentation, it is a valid approach.
Related
In a v-select field, I would like to display entries in a fold-out manner on the one hand, and on the other hand, I would like to use the field to be able to enter a text in order to search for the corresponding item among the entries. Is there any prop in vuetify that I can use or something like that. Or is there a good tip to implement the text field?
<v-select
v-model="searchParams.importApples"
label="Importapples"
:items="importApplesItems"
:menu-props="{ bottom: true, offsetY: true }"
item-text="label"
item-value="value"
filterable
clearable
outlined
dense
/>
The usage of autocomplete solved my problem.
I am building a React application and using react-final-form library. I am rendering a select component, but on selecting an item it doesn't get selected. On selecting again, then only it gets selected. I'm not sure why select component state is not getting changed ? Could anyone please check and assist.
Here is the code sandbox link : https://codesandbox.io/s/broken-sunset-9ogwc8?file=/src/Components/Actors.jsx
Regards.
In your NativeSelectField.jsx, change the onChange handler as below:
<NativeSelect
...
...
onChange={(event) => {
input.onChange(event.target.value);
}}
...
...
/>
Working Demo
By default the ChipField can only show the content of a field, at least this is what the documentation tells. The example below displays the contents of the field name.
<ReferenceArrayField source="substances" reference="substances" label="Substanzen">
<SingleFieldList>
<ChipField source="name" />
</SingleFieldList>
</ReferenceArrayField>
However, I want ChipField to display a text combined of information from several fields:
const Substanz = ({ record }) => {
return record.name+" ("+record.unit+")";
};
<ReferenceArrayField source="substances" reference="substances" label="Substanzen">
<SingleFieldList>
<ChipField source={<Substanz />} /> <---- this does not work!
</SingleFieldList>
</ReferenceArrayField>
but unfortunately, source only accepts a field name, not an object like the OptionText prop of the SelectInput field.
What is the expected way to do this?
I think you are almost there with your custom SubstanzField component. Just use MUI styled component to make your own ChipField-like looking component and pass it directly inside of the SingleFieldList
MUI Chips docs
Don't know if you expected more sophisticated solution but this should be simple and flexible enough for your case.
I am trying to add a search option to a dropdown which performs the functionality of autocomplete. I have been given a basic dropdown with select tag.
I tried searching for the following options:
1) I tried to convert my select table into a p-dropdown table using PrimeNG but was unsuccessful.
2) I found select2 option for angular and have been unable to bind the selected value from the dropdown to the ngModel value. The value selected must be retained when navigating between the previous or next pages, however that isn't happening.
3) I tried to convert select table to p-autocomplete as well but do not know how to.
Please guide me with any one of the following ways.
This is the provided select dropdown:
<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]"
(ngModelChange)="handleChange(rowData.rowId)">
<option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]">
{{option.col_name}}
</option>
</select>
This is what I tried with select2 for angular.
{{option.col_name}}
Error: No value accessor for form control with unspecified name attribute
This error is thrown for the following line:
[(ngModel)]="selectedColumnDetails[rowData.rowId]
try to add the name attribute along with ngmodel in the same tag
<select> works slightly differently with ngModel.
Taking your code snippet, Modifying it to pick ControlValue
<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]"
(ngModelChange)="handleChange(rowData.rowId)">
<option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]" [(ngValue)]="option">
{{option.col_name}}
</option>
</select>
Should work for you.
You should find ample examples provided by angular here and here
For select2 in Angular, try:
<select2 ... [value]="selectedColumnDetails[rowData.rowId]" (valueChanged)="handleChange(rowData.rowId)"></select2>
Of course, you would have to update selectedColumnDetails[rowData.rowId] inside handleChange(rowData.rowId).
[(ngModel)]="data" is short for [value]="data" (input)="data = $event.target.value". Unfortunately the ng2-select2 package does not support the input event so you have to write this out in the long form with valueChanged.
When using the tag imported from reactstrap, I came across a minor problem.
I used
<.Input type="select" ... /.>
and wrapped inside it
<.option value={}....>
so that when an option was selected, the value of the input was set to the value of the selected option.
Even when the value of the Input tag was set with a number, accessing e.target.value provided me with a string, which I had to parse into an int.
So I was wondering if there is a specific return type for the Input tag of type select in reactstrap- even when the value is inputted as a number, does it automatically save it as a string?
It doesn't seem like there is a way to achieve this in reactstrap. However the beauty of React is that you are able to quickly write your own reusable component to achieve this.
const NumberSelect = (props) => (
<input type='select' onChange={(event) => {
props.onChange(parseInt(event.target.value, 10));
}}>
<option value={1}>One</option>
<option value={2}>Two</option>
</input>
);
You will need to tweak this code a bit according your own needs, but this is how I would solve your problem.