The image below demonstrates the current GUI, i simply wish to place the icon to the left of the 'Language' menu instead of the current position (right)
Current Code
</Dropdown.Item>
<Dropdown text="Language" icon="angle down" pointing="right"
options={[
{ text: 'English', value: 'en', flag: 'gb'},
{ text: 'Svenska', value: 'se', flag: 'se' },
{ text: 'Dansk', value: 'de', flag: 'de' },
{ text: 'Norsk', value: 'no', flag: 'no' },
]}
/>
Any suggestions on how i could locate the "angle down" icon to the left of the "language" text would be much appreciated.
You could use the trigger prop in stead of text as per the docs and remove the default icon.
const trigger = (
<span>
<Icon name="angle down" /> Language
</span>
);
const options = [
{ text: "English", value: "en", flag: "gb" },
{ text: "Svenska", value: "se", flag: "se" },
{ text: "Dansk", value: "de", flag: "de" },
{ text: "Norsk", value: "no", flag: "no" }
];
const DropdownTriggerExample = () => (
<Dropdown pointing="right" trigger={trigger} options={options} icon={null} />
);
Also note that you have a typo for the Danish element ("de" where it should be "dk").
Related
I want to display a Dropdown menu which has customizable Items. For this reason I am using Dropdown.Menu -> Dropdown.Item and there I do my styling depending on some data.
import React from "react";
import { Dropdown } from "semantic-ui-react";
const countryOptions = [
{ key: "af", value: "af", flag: "af", text: "Afghanistan" },
{ key: "ax", value: "ax", flag: "ax", text: "Aland Islands" },
{ key: "al", value: "al", flag: "al", text: "Albania" }];
const DropdownExampleSearchSelection = () => (
<Dropdown placeholder="Select Country" selection search options={countryOptions}>
<Dropdown.Menu>
{countryOptions.map((obj) => {
return <Dropdown.Item value={obj.text} classname ={this.getCorrectCSS(obj.key)}></Dropdown.Item>;
})}
</Dropdown.Menu>
</Dropdown>
);
export default DropdownExampleSearchSelection;
However I would like this dropdown to also be searchable. So I include the search flag on the parent component. But the search does not work.
Is there a way to make the search work using Dropdown.Menu and Dropdown.Item?
I have a set of select menus and I am trying to change a value when I select an option using onChange={updateValue} event. When I first select an option, the value is not being updated in the select menu.
It only changes the second time I try to choose an option. Not sure what I am doing wrong.
Edit: I did some more research (OnChange event using React JS for drop down) and I believe I need the value of the select to be updated as well, using setState. I cant figure out how to do it without having a variable for each value and set the state again.
let selectMenus = [
{
id: 'id1',
name: 'name1',
label: 'label1',
value: '0',
options: [
{
text: 'All ages',
value: '0',
},
{
text: '35 - 37 yrs',
value: '1',
},
],
buttonLabel: 'Refresh',
},
{
id: 'id2',
name: 'name2',
label: 'label2',
value: '1',
options: [
{
text: 'All ages',
value: '0',
},
{
text: '45 - 50 yrs',
value: '1',
},
],
buttonLabel: 'Refresh',
},
];
const [url, setUrl] = useState('http://localhost:5000/selectDropdowns1');
const updateValue = () => {
setUrl('http://localhost:5000/selectDropdowns2');
};
<form>
{selectMenus.map((select) => (
<div key={select.id} className='select-container'>
<label htmlFor={select.id}>{select.label}</label>
<select id={select.id} name={select.name} value={select.value} onChange={updateValue}>
{select.options.map((option) => (
<option value={option.value} key={uuid()}>
{option.text}
</option>
))}
</select>
<button>{select.buttonLabel}</button>
</div>
))}
</form>;
The problem is that when you provide onChange prop to select component it become a controlled component.
For more information: React Docs - Forms #controlled components
When you dealing with controlled components you must provide a value to it and when onChange triggerd it should update that value to work properly. Since you did not provide the full code, I imagine you have an array of select menus and options attached to it.
So in this case every select component should have own onChange method and own value to work properly. To achive this we should create another component for only Select Options. Like this;
function SelectComponent({ optionList, onSelected }) {
const [value, setValue] = useState();
const updateValue = ({ target }) => {
setValue(target.value);
if (onSelected) onSelected(target.value);
};
return (
<>
<label htmlFor={optionList.id}>{optionList.label}</label>
<select
id={optionList.id}
name={optionList.name}
value={value}
onChange={updateValue}
>
{optionList.options.map((option) => (
<option value={option.value} key={uuid()}>
{option.text}
</option>
))}
</select>
<button>{optionList.buttonLabel}</button>
</>
);
}
This component accepts to props; optionList and onSelected
optionList is the list of options to render
onSelected is a method that we call when user select and option
On main component, we should change the select section with our select component with props optionList and onSelected
return (
<div>
{selectMenus.map((select) => (
<div key={select.id} className="select-container">
<SelectComponent optionList={select} onSelected={updateValue} />
</div>
))}
</div>
);
So overall code is like this:
import { useState } from "react";
import { v4 as uuid } from "uuid";
export default function App() {
const [url, setUrl] = useState();
const updateValue = (value) => {
setUrl(value);
};
const selectMenus = [
{
id: 1,
label: "Menu 1",
name: "menu1",
buttonLabel: "Menu 1",
options: [
{
text: "option 1",
value: "option1"
},
{
text: "option 2",
value: "option2"
},
{
text: "option 3",
value: "option3"
}
]
},
{
id: 2,
label: "Menu 2",
name: "menu2",
buttonLabel: "Menu 2",
options: [
{
text: "option 1",
value: "option1"
},
{
text: "option 2",
value: "option2"
},
{
text: "option 3",
value: "option3"
}
]
},
{
id: 3,
label: "Menu 3",
name: "menu3",
buttonLabel: "Menu 3",
options: [
{
text: "option 1",
value: "option1"
},
{
text: "option 2",
value: "option2"
},
{
text: "option 3",
value: "option3"
}
]
}
];
return (
<div className="App">
<h1>URL Value: {url}</h1>
{selectMenus.map((select) => (
<div key={select.id} className="select-container">
<SelectComponent optionList={select} onSelected={updateValue} />
</div>
))}
</div>
);
}
function SelectComponent({ optionList, onSelected }) {
const [value, setValue] = useState();
const updateValue = ({ target }) => {
setValue(target.value);
if (onSelected) onSelected(target.value);
};
return (
<>
<label htmlFor={optionList.id}>{optionList.label}</label>
<select
id={optionList.id}
name={optionList.name}
value={value}
onChange={updateValue}
>
{optionList.options.map((option) => (
<option value={option.value} key={uuid()}>
{option.text}
</option>
))}
</select>
<button>{optionList.buttonLabel}</button>
</>
);
}
Working example is overhere codesandbox
I am working on ReactJS, I created a component using Material UI Autocomplete in which I need to filter the result based on the selections. As you see the object has "GROUP", once the user select any options I need to remove the entire group out the display list. If I select Region or Asia (Region) I need to filter all the objects which has GROUP "RG" and bring back the filtered object once I remove the selected value. Thanks in advance.
const Typeahead = props => {
const classes = useStyles();
let Dictionary = React.useState([]);
const MainDictionary = [
{ NAME: "Region", FIELD: "RG" , GROUP: "RG"},
{ NAME: "Asia (Region)", FIELD: "RG-Asia" , GROUP: "RG"},
{ NAME: "Australia (Region)", FIELD: "RG-Australia" , GROUP: "RG"},
{ NAME: "Central America (Region)", FIELD: "RG-Central America" , GROUP: "RG"},
{ NAME: "Europe (Region)", FIELD: "RG-Eastern Europe" , GROUP: "RG"},
{ NAME: "Country", FIELD: "CY" , GROUP: "CY"},
{ NAME: "Country 1 (Country)", FIELD: "SC-Country 1" , GROUP: "CY"},
{ NAME: "Country 2 (Country)", FIELD: "SC-Country 2" , GROUP: "CY"},
{ NAME: "Country 3 (Country)", FIELD: "SC-Country 3" , GROUP: "CY"},
{ NAME: "Country 4 (Country)", FIELD: "SC-Country 4" , GROUP: "CY"},
{ NAME: "Country 5 (Country)", FIELD: "SC-Country 5" , GROUP: "CY"}
];
Dictionary = MainDictionary;
function filterOptions(event, params) {
Dictionary = MainDictionary;
params.forEach(element => {
Dictionary = Dictionary.filter(b => {
return b.GROUP !== element.GROUP;
}).map(a => {
return a;
});
});
}
return (
<div className={classes.root}>
<Autocomplete
multiple
id="tags-standard"
width="auto"
options={Dictionary}
getOptionLabel={option => option.NAME}
onChange={(event, newValue) => {
filterOptions(event, newValue);
}}
value = {selectedValue}
renderInput={params => (
<TextField
{...params}
variant="standard"
placeholder="Select From Dictionary"
fullWidth
/>
)}
renderOption={(option, { inputValue }) => {
const matches = match(option.NAME, inputValue);
const parts = parse(option.NAME, matches);
return (
<div>
{parts.map((part, index) => (
<span
key={index}
style={{ color: part.highlight? "#36a5f7": "" , fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
</div>
);
};
When on Select field I hit space, first value from options is being selected. How to disable such behaviour?
<Select
ref={r => (this.selectRef = r)}
className="basic-single"
classNamePrefix="select"
onInputChange={val => {
console.log('va', val)
this.setState({ inputValue: val })
}}
inputValue={this.state.inputValue}
options={[{ value: 'aaa', label: 'aaa bbb' }, { value: 'bbb', label: 'bbb ccc' }]}
name="color"
/>
HERE IS A DEMO
I would suggest to use the onKeyDown props and prevent the action when the use hits the space bar so nothing will be selected.
<Select
ref={r => (this.selectRef = r)}
className="basic-single"
classNamePrefix="select"
onInputChange={val => {
this.setState({ inputValue: val });
}}
onKeyDown={e => {
if (e.keyCode === 32 && !this.selectRef.state.inputValue) e.preventDefault();
}}
inputValue={this.state.inputValue}
options={[
{ value: "aaa", label: "aaa bbb" },
{ value: "bbb", label: "bbb ccc" }
]}
name="color"
/>
Live example here.
I have a select field in sencha touch as below.
var filter = new Ext.form.Select({
options: [
{ text: 'Availability', value: 'Availability' },
{ text: 'Price', value: 'Price' },
{ text: 'Proximity', value: 'Proximity' }
],
id:'FilterSelect'
label: 'Filter By'
});
I would like to know how to disable or hide a particular option value, as on some events I need to hide/disable the "Proximity option" and vice versa.
Whenever you want to change the options, simply call setOptions() like this:
filter.setOptions([
{ text: 'Availability', value: 'Availability' },
{ text: 'Price', value: 'Price' }
]);
The docs have an additional example: http://docs.sencha.com/touch/1-1/#!/api/Ext.form.Select