I have a list of 3 status that should be shown as the default value but I need to remove one of those options from the dropdown. I was able to disable it using the isOptionDisabled prop but my goal is to remove.
Right now I have an object with the option
export const userStatus = [
{ label: 'Active', value: 'ACTIVE' },
{ label: 'Blocked', value: 'BLOCKED' },
{ label: 'Pending', value: 'ACTIVATION_PENDING', isDisabled: true },
];
I want to remove the pending from the dropdown but show as default value if it is the default value.
My select component looks like this
<Select
name={name}
fullWidth={fullWidth}
components={{ DropdownIndicator }}
isSearchable={false}
value={selectValue}
options={options}
classNamePrefix="styled-select"
variant={variant}
isDisabled={disabled}
hasError={hasError}
onChange={onSelectChange}
isOptionDisabled={isOptionDisabled}
/>
Can you filter the options before you send it as a prop to React-Select?
Related
I have a requirement to add tooltip on hover to disabled options in a dropdown in React fluent UI.
I am able to add tooltip to singular component using https://www.npmjs.com/package/#fluentui/react-tooltip
<Tooltipcontent="Example tooltip">
<Button/>
</Tooltip>
but how to add similar behaviour to dropdown options and only for disabled options
like: "Disabled cause of non avilability"
sample dropdown fluent ui code
const options: IDropdownOption[] = [
{ key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'orange', text: 'Orange', disabled: true },
];
export const DropdownBasicExample: React.FunctionComponent = () => {
return (
<Stack tokens={stackTokens}>
<Dropdown
placeholder="Select an option"
label="Basic uncontrolled example"
options={options}
styles={dropdownStyles}
/>
</Stack>
);
};
Thanks
Fluent UI renders every disabled option as a button element with the disabled attribute, which makes it non-interactive by default.
Here's a method to solve this that I believe is also fairly accessible:
First, define your array of IDropdownOption items so that they conditionally set the disabled and title properties:
const options: IDropdownOption[] = [
{ key: 'apple', text: 'Apple' },
{ key: 'orange',
text: 'Orange',
disabled: isOrangeDisabled,
title: isOrangeDisabled ? "This is a disabled tooltip" : ""
},
];
You're also going to need to define a custom rendering function for the items in order to apply a nice tooltip:
<Dropdown onRenderOption={onRenderOption} />
and then define a function like this in your component:
const onRenderOption = (option: IDropdownOption): JSX.Element => {
return (
<>
{option?.disabled && (
<div className="interactive">
<TooltipHost content={option.title}>
<span>{option.text}</span>
</TooltipHost>
</div>
)}
{!option?.disabled && (
<span>{option.text}</span>
)}
</>
);
};
Finally, that interactive CSS class needs to be defined in your CSS file. This will override the browser's default behaviour of making disabled elements non-interactive:
.interactive {
pointer-events: auto;
}
Some things to note:
The reason the title is set to an empty string when the option is not disabled is so that it doesn't have a string value when the interactive item is rendered. Without this, the browser will render the tooltip when you hover on a selectable item, which looks ugly.
Using the title attribute should make the component pretty usable for screen readers and other assistive technology (though I am far from an expert)
The template only renders the TooltipHost and interactive class when the object is disabled, so that the tooltip and that behaviour only kick in when the option is disabled. Because the underlying option is still disabled, you still won't be able to select it.
I am new to Material UI and have an issue. I have a reusable dropdown filter that is populated from an array. Everything works exactly how I want it to, but I keep getting a console error that the component is changing and uncontrolled input. The problem is, if I add a default value (value='') to eliminate the uncontrolled error, the dropdown will not display my selected filtering option in the input, just a blank. How can I control the component but still show my the user the filtering option selected.
const status = [
{id: 1, label: '...', value: ''},
{id: 2, label: 'Active', value: 48},
{id: 3, label: 'Inactive', value: -1},
{id: 4, label: 'On Hold', value: 48654},
{id: 5, label: 'Out Of Spec', value: 50989},
]
<DropdownFltr
prompt='Status...'
options={status}
onChange={handleFilterValue}
/>
export default function DropdownFltr(props) {
const { error=null, options, prompt, onChange, value, ...other } = props;
return(
<>
<FormControl>
<InputLabel>{prompt}</InputLabel>
<Select
value='' // <<< Causes issues, but fixed uncontrolled error
onChange={onChange}
{...other}
{...(error && {error:true, helperText:error})}
>
{options.map((option, id) => (
<MenuItem
key={option.id}
value={option.value}
>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
</>
)
}
Add the default Value in the Component Select
<Select
defaultValue={''}
/>
I'am creating drop down list for countries and its relevant country code. I want to set default value as '+xx' which is for particular country, but, its displayed as country as well as its respective code. How to hide country name, but, display only in drop down, i.e, country name as well as code.
Following is the code for reference
const countries = [
{
value: "US",
label: "+1"
},
{
value: "UK",
label: "+44"
},
{
value: "SA",
label: "+27"
},
{
value: "IND",
label: "+91"
}
];
const [countryCode, setCountryCode] = React.useState("+91");
const handleChange = (event) => {
setCountryCode(event.target.value);
};
return (
<TextField
id="standard-select-currency"
select
label="Select"
value={countryCode}
onChange={handleChange}
helperText="Please select your Country"
>
{countries.map((option) => (
<MenuItem key={option.value} value={option.label}>
<p>{option.label}</p>
<p>{option.value}</p>
</MenuItem>
))}
</TextField>
)
As you can see above in the image Country name is also seen which I want to hide. So, what is the best solution?
Below is the codesandbox link: https://codesandbox.io/s/material-demo-forked-kgkcd
You can use the Select component's renderValue prop to customize the displayed value. You can pass the select props to the TextField component through the SelectProps prop.
<TextField
select
label="Country Code"
value={countryCode}
onChange={handleChange}
SelectProps={{
renderValue: (value) => value,
}}
>
...
</TextField>
I have to use this component in my application:
const options = [
{ value: "gold" },
{ value: "lime" },
{ value: "green" },
{ value: "cyan" }
];
ReactDOM.render(
<Select
mode="multiple"
placeholder={["good"]}
style={{ width: "20%" }}
options={options}
/>,
document.getElementById("container")
);
The idea is, that i want to change it in the next way: When i will select a value from dropdown i don't want do display it in input, but i want to keep by default the text good in the input, and when i will choose an option, that option should not change the good placeholder. How to do this?
demo: https://codesandbox.io/s/custom-tag-render-ant-design-demo-j9edb?file=/index.js:149-428
EX: when will select a option from select, that option should not be displayed, and the placeholder should be in the input
I have a color input box in my table. To help with the formatting, I have a colored div on the 'outside', with an 'input:color' field inside of it, set to display:none. Clicking on the outer div triggers a click on the inner input.
Overall, the system works great. Except that it triggers this error:
Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
I have both an onChange and defaultValue set....any idea why this is happening?
renderColorEditable(cellInfo) {
return (
<div
className="colorBox"
style={{backgroundColor:cellInfo.value}}
onClick={(event) => {
if(event.target.querySelector('input')){
event.target.querySelector('input').click();
}
}}>
<input
style={{display: 'none'}}
type="color"
onChange={e => {
const data = [...this.state.data];
data[cellInfo.index][cellInfo.column.id] = e.target.value;
this.setState({ data });
}}
defaultValue={cellInfo.value}
/>
</div>
);
}
const columns = [
{
Header: '',
accessor: 'color',
sortable: false,
width: 30,
filterable:false,
resizable: false,
Cell: this.state.editing ? this.renderColorEditable : (cellInfo)=>(<div className="colorBox" style={{backgroundColor:cellInfo.value}} />)
}
]