By default when the react-select is rendered i see "Select..." on the component. I want to see "Search ...".
Looking at the docs, I am assuming I need to use the noOptionsMessage prop, which is documented as:
noOptionsMessage function = () => undefined
Text to display when there are no options
({
inputValue string required
}) => One of<
react.Node,
null
>
I did not really understand that bit of the docs. E.g. this prop seems to be a function. So, I have been trying variations including following without success:
<AsyncSelect
cacheOptions
defaultOptions={[]}
loadOptions={handleLoadOptions}
onChange={handleChange}
noOptionsMessage={()=> "Search..."}
/>
So, what is the solution?
Add placeholder to the AsyncSelect.
<AsyncSelect
cacheOptions
defaultOptions={[]}
loadOptions={handleLoadOptions}
onChange={handleChange}
placeholder='Search...'
/>
Common props you may want to specify include:
autoFocus - focus the control when it mounts
className - apply a className to the control
classNamePrefix - apply classNames to inner elements with the given prefix
isDisabled - disable the control
isMulti - allow the user to select multiple values
isSearchable - allow the user to search for matching options
name - generate an HTML input with this name, containing the current value
onChange - subscribe to change events
options - specify the options the user can select from
placeholder - change the text displayed when no option is selected
value - control the current value
Related
I am obtaining from an API the data to fill a v-select type component, the component is filled correctly and I also obtain the options that the user already had assigned (multiple)
And the v-select component are filled correctly
But when i try to add another option occurs the next
Here is the Source Code
<validation-provider
#default="validationContext"
name="skill"
>
<b-form-group
label="Skills"
label-for="skill_id"
:state="getValidationState(validationContext)"
>
<v-select
v-model="itemData.skills"
:dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
multiple
:options="skillOptions"
:clearable="false"
:reduce="(val) => val.value"
input-id="skill_id"
/>
<b-form-invalid-feedback
:state="getValidationState(validationContext)"
>
{{ validationContext.errors[0] }}
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
Here i have the array of objects, with multiple elements
itemEdit.value.skills
Then map to get a reduced array with only the value and label
I have probed using only the label without value and the result is the same
const openEdit = item => {
isSidebarActive.value = true
itemEdit.value = item
itemEdit.value.skills = item.skills.map(skill => ({
value: skill.id,
label: skill.skill,
}))
isAdd.value = false
}
Everything apparently goes right, the v-model match correctly with the available options, the problem comes when the user interact with the vSelect to add another item, the already selected items disappear
Thanks in advance
Based on this page o the Vue Select Documentation, the reduce prop is usually meant for use with a label prop, and is only needed if you provide an object to v-select.
I suspect you are providing an array of primitives in your v-model (ie itemData.skills is an array of strings) instead of an array of objects. If it is an array of objects instead, then I suspect you either don't have a [label] key on the object (the default that label is set to), or you don't have a [value] key (what you are trying to return with your reduce prop).
Ideally, you would give us an example of your data coming in for us to be able to help you better.
thanks for listen, the problem was solved removing:
:reduce="(val) => val.value"
From
<v-select
v-model="itemData.skills"
:dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
multiple
:options="skillOptions"
:clearable="false"
:reduce="(val) => val.value"
input-id="skill_id"
/>
Hi Guys I'm Newbie at VueJS,
Anyone who can help me about on getting default checked at my checkbox list
I'm using v-model so the checked won't work
Any idea or suggestion?
You bind the input to a truthy value using the v-model directive
<input type="checkbox" v-model="selected">
In your component data (Updated based on #Phil s comment)
data () {
return {
selected: true, // True of false, or other truthy value depending on needs
}
}
Then, depending on the value on selected your input will be checked/unchecked.
Note - in the documents it is stated that
v-model will ignore the initial value, checked, or selected attributes
found on any form elements. It will always treat the Vue instance data
as the source of truth. You should declare the initial value on the
JavaScript side, inside the data option of your component.
Read more at https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
I have a Google places autocomplete input and need to populate address related fields based on selected place as below:
<GPAutocompleteInput
source="address_full"
placeholder="Find address"
onPlaceSelected={onPlaceSelected}
gaOptions={{ types: ["address"] }}
/>
<TextInput source="address_street" disabled label="Ulica" />
<TextInput source="address_postcode" disabled label="Kod pocztowy" />
<TextInput source="address_city" disabled label="Miasto" />
Now I would like the 3 disabled inputs to be filled in with the address components from the selected place but can't figure out how to do this.
I've tried providing initialValues to the SimpleForm component and this works ok in the create view but not in the edit because those fields already have a value the values are not being updated.
react-final-form provides a simple hook allowing me to change values
import { useForm } from "react-final-form";
const form = useForm();
form.change("address_city", components?.address_city);
There may be a better way as this requires building a custom component to use form context required by the hook.
I have added in a React-Select component to my code where I am passing in the options prop and the onChange callback to obtain the value there. What I need to do is have the ability to reset that value back to null when the user presses a button that resets the entire form back to its original state. That is why I feel I need a way to access the current value of the select so that I could set it back to null.
I have tried to pass in ref prop to a select to get the current value there and I see in the console that currentValue and value are being set back to undefined when I choose the exit button.
<Select
title={'List'}
options={createListOptions}
ref={listSelectRef}
closeMenuOnSelect={true}
filterOption={createFilter({
matchFrom: 'start',
})}
isRequired
value={listId}
onChange={value => {
setListIds(value);
setListError(false);
}}
error={listError}
/>
</div>```
On the click of button you can get the selected value using ref,
<Select defaultValue={options[1]} options={options} ref={this.listSelectRef}/>
<button onClick={this.getVal}>Get Value</button>
Here defaultValue is used for initial value, so that we can check without changing select value how to get already selected value.
And your function should be,
getVal = () =>{
console.log(this.listSelectRef.current.state.value); //this will give you selected option object
console.log(this.listSelectRef.current.state.value.value); // this will give you value
console.log(this.listSelectRef.current.state.value.label); //this will give you label which is actually shown on front end
}
Demo
I think you should try the AsyncSelect for this
When Select isSearchable and device is mobile I would like the keyboard to be in number mode. Is this possible? Thanks
You have to overwrite the Input component using the components framework and set the pattern prop to only allow digits if the current device is mobile.
The pattern prop (or rather attribute) on input elements checks the value of the input for input validation. With the right pattern, it controls the type of keyboard you get on mobile devices. \d* is a regex pattern that will only allow digits into the input.
const Input = (props) => <components.Input {...props} pattern={somehowCheckForMobile() ? "\\d*" : undefined} />;
<Select
{ ... }
components={{
Input
}}
/>
CodeSandbox example