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)
Related
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 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
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});
Implementing React from couple of months. I used 'react-predictive-input' for predicting items from the pre-defined list on onchange event.
With "large" data sets (500/1000 items) the AutoComplete component becomes very slow especially when typing the first 3 characters because it will render many items in the dropdown slowing the entire interface, even using a maxHeight for the component.
Do we have any attribute as 'max-items' to show from the list?
Below is the snippet of code :
<Autocomplete
id="items"
placeholder="My Items"
data={this.props.items}
onSelected={this.onItemSelected.bind(this)} />
Function is invoked if item is selected
onItemSelected(value){
console.log(`${value} was selected`);
}
List of items
static defaultProps = {
items:[
'car','Bicycle','Truck','Green Van'............................1000items]
};
Text prediction works fine, speed and display are becoming an issue to handle.
I used Material UI Autocomplete for retrieving the use cases mentioned in the question. Link for reference here.
I am currently customizing a SugarCRM instance. In one module I have created a few custom fields and a drop down menu. Based on the selection of the drop down menu I want to show or hide some of my fields. This works fine. My question is about the initial load of the page: In that case, all possible fields are displayed - not only the ones that should be displayed based on the default selection in the drop down menu.
My first instinct was to register the onload event and just hide whatever I don't need to see when the page is loaded. But I couldn't find anywhere to place it as I don't want to change /modules/... directly. I'd like to restrict my changes to /custom/modules...
Any ideas?
Here few ways to control dropdown visibility:
There is admin when you edit field there is formula and visibility functionality you can also try this.
Create custom edit view and add javascript code in display function of view.
custom/modules//views/view..php
.php');
class View extends View {
function View() {
parent::View();
}
function display() {
echo '';
parent::display();
}
}
?>
Custom Javascript can be added to editviewdefs.php
'templateMeta' =>
array (
includes' => array (
1 =>array ('file' => 'custom/modules/<ModuleName>/js/custom.js',),
),
),