I can't get the selected value from the dropdown to render inside the dropdown once it's selected.
The right value is being set (seen via console) but isn't displayed inside the actual dropdown
const onSlotIdChange = (e, data) => {
console.log(props);
console.log("slotId fired, value ---> ", data.value);
props.setFieldValue("slotId", data.value);
};
The actual component is here
<Dropdown
id="slotId"
value={slotId}
onChange={onSlotIdChange}
options={slotIds.map(id => {
return {
key: id.id,
text: id.id,
value: id.id
};
})}
/>
I've had an issue exactly like this and the solution before was to use something like props.setFieldValue("slotId", e.currentTarget.textContent); but i've tried this and it isn't working in this case. The <Dropdown> component is from Semantic ui react
I have a codesandbox here. Once you get to the splash page go to the Login page via the button at the top. Select Slot Sec officer from the radio group it will render 3 dropdowns, the 2nd and 3rd dropdowns (slotId and deviceId) are where I'm having the issue. If you pull up the console and make a selection the value is getting set correctly but the value doesn't appear in the dropdown once it's selected.
The code for the dropdowns are in getSlotIds and getDeviceIds classes. and the onChange methods are inside FormikLoginForm class
It's because you're not setting the state after the user select the value, like you did in "Slot Security Officer Role" (this is correct, see line 246 in your codesandbox).
For example, to fix "device id" dropdown, after line 258, I put this code in line 259:
this.setState({deviceId: data.value});
and it works. The same need to be done for slotId, after line 253:
this.setState({slotId: data.value});
Related
I am new to Vue JS and I have below requirement
Requirement :
I have dropdown with below values
On selection of each value, I want to add dropdown component on page, which are already defined.
For example:
On Selection of 'Closed', dropdown component (which is searchable dropdown)will be added
On Selection of 'Reviewed', another dropdown component where user can select values from dropdown. (not searchable one). Likewise..
What I have :
I already have all the different types of dropdowns as a component.
What I tried :
I have loaded all the four types of dropdown on page load, and I am hiding and showing them based on dropdown value selection.
Example: I am showing only searchable dropdown component when user select 'Closed' option and hiding other components. I am showing selectable dropdown component when user select 'Reviewed' option and hiding other components.
Problem :
Now the requirement is, user can select any option N number of times and on each selection, respective dropdown component should get added.
This screen also have edit functionality.
Note :
Consider this as a filter functionality with below screen
Any help / pointers would be appreciated. Thanks in advance.
First you should create Closed and Reviewed components
Then, you should have a array of filters:
data() { return {
filters: [],
} }
When Add filter is clicked you should push corresponding component to filters, something like:
methods: {
addFilter() {
const component = Created /* */;
this.filters.push({
value: null,
component: component
})
}
}
And finally render them in template this way:
<div v-for="(filter, index) in filters" :key="index">
<component :is="filter.component" />
</div>
Demo
For And/Or dropdowns, you can use some hacks but I'm not sure how to implement them (you can check if index is zero to only display them between filters)
I am using latest quasar (1.15.3).
I have a QSelect component with multiselect set to true
and i'm getting data from the server. I expect the multi select to be updated with the selected values, but it only happens when I click it.
Here is the select code:
<q-select
v-model="form.scopes"
ref="scopesSelect"
required
class="q-mt-md full-width"
label="Role Application Scopes"
placeholder="Select one or more application scope(s)"
data-testid="scope-select"
option-value="value"
option-label="label"
multiple
emit-value
use-input
use-chips
:options="filteredScopes"
:rules="[
val => (val && val.length) || 'Role Application scope is required'
]"
#filter="onFilterByScope"
/>
form.scopes contains ["Global","Default"] so I expect these values to show as selected.
filteredScopes has this form:
[
{label: "Global", value:"Global"}
...
]
This is how the page looks after I loaded the data from the server:
as you can see, the last select is not populated, but as soon as I click it, It show the selected values:
Currently the only way I found around it is by using an ugly hack:
hackToCauseMultiselectListToRenderSelectedValues() {
this.$nextTick(() => {
this.$refs.scopesSelect.focus();
});
setTimeout(() => this.$refs.roleName.focus(), 500);
},
So I'm manually focusing the select component, which also shows the dropdown, and then, after a while I focus the input at the top so the dropdown will go away.
I tried other methods like this.$refs.scopesSelect.refresh(); but nothing worked :(
Would love to hear any idea.
I am writing a React application that I'm testing with Cypress. In my integration tests I've written a cypress command that takes an array of strings, in order to select items in a multi-value select box.
The code I'm using looks roughly like this:
Cypress.Commands.add("command", (options) => {
options.forEach((option) => {
cy.get("div[data-g-portal-id='1']") // this is the container for the select box dropdown
.find("div[role='menubar']")
.contains(option)
.click({ force: true });
});
}
I've tried various iterations of this, including things like cy.wrap and .each. Whatever I do, when the array contains more than one item, it clicks one item, the item is marked as selected successfully, then it clicks the other item, marks it as selected, but the first item loses its selection state. Its as if the internal state of the component never really got the initial change.
I've confirmed this is not a bug in my application; when testing it manually, the multi-select works fine. But Cypress just doesn't want to know. Any help would be much appreciated.
The v2.grommet.io/select uses a "portal" to display the dropdown options.
The portal is just a div that's appended to body when the dropdown opened and removed again when an option is clicked.
Problem is, there isn't a property to connect the dropdown and portal containing the options. There may be other portals present e.g the Layer component uses a portal.
The options portal we need to target will always be the last portal on the page (since we just opened the dropdown). In the custom command, applying the .last() command will select the options portal.
Cypress.Commands.add("multiselect", (options) => {
options.forEach((option) => {
cy.get(`[data-g-portal-id]`)
.last() // just opened the dropdown so option are in the last portal
.find("div[role='menubar']")
.contains(option)
.click();
});
});
cy.get('input[name="my-select"]')
.click(); // open dropdown
.multiselect(['First', 'Third']);
cy.get('input[name="my-select"]')
.click(); // close dropdown
cy.get('input[name="my-select"]')
.should('have.value', 'multiple')
The test ends with dropdown displaying the text "multiple".
Configuration of the Select,
<Select
multiple // allow multiple selected options
closeOnChange={false} // do not close the dropdown between selections
name="my-select"
options={myOptions}
...
/>
I have requirement to set searchTerm value Programmatically(using Virtual keypad) and search the dropdown should show searchterm based options.
where form control is updateOn:'blur'.
But here i am facing issue like form control is not getting updated after selecting dropdown option based on searchTerm provided by virtual input key(in example stackblitz red color text control value is null).
Steps:
1.press virtual key pad button
2.select any option
3.now check red color text value:
Thanks.
It is getting updated, but you are using before it is updated. Even if you open the <ng-select> yourself, it will show different values in black and red.
If you can, I'd suggest for you to use change.id instead:
this.afterChangesFormControlValue = change.id;
But if you can't... if you wrap it inside a setTimeout(), even with a 0 delay, it will start working, since the setTimeout will be triggered only after the update is done:
setTimeout(() => {
console.log('on select option after given search term from virtual keyboar')
console.log("change:",change)
console.log("form control value:",this.form.controls.example.value)
this.afterChangesFormControlValue=this.form.controls.example.value;
}, 0);
Both should produce the same results - they did when I tested in your Stackblitz, but setTimeout is a bit unsightly.
I have been trying to develop a custom drop down component using list elements in react. Found the, following work around very promising, but I am bit confused how to change the default value when an item is selected from the drop down. For example: initially "Select movie" is selected and when I select an item like: "The prestige" it should appear in the field.
Can be check the demo here in the following link:
https://codesandbox.io/s/objective-williams-8je1y?file=/src/Dropdown.jsx
Any help would be highly appreciated.Thanks.
To achieve the following, you have to use the title prop as a default value of a new state:
const [dropdownTitle, setDropdownTitle] = useState(title)
then use the dropdownTitle as the display value for the dropdown:
<p className="dd-header__title--bold">{dropdownTitle}</p>
Lastly set the dropdownTitle whenever you select or click an item:
function handleOnClick(item) {
setDropdownTitle(item.value)
// rest of the code
I modified your sandbox, check this out: https://codesandbox.io/s/stoic-fog-98wce?file=/src/Dropdown.jsx