I'm using Ant Design for inputs in my React project. In the multiple input select, I have the default placeholder message "Select an Option"
{type === 'select' && (
<Select
className={isBlack}
mode="multiple"
key={inputKey}
id={inputKey}
defaultValue={value}
disabled={isFixed}
>
{!isBlack && (
<Option
value=""
selected
disabled
hidden
>
<span>Select an option</span>
</Option>
)}
{options.map((option, i) => (
<Option
className="ant-drop"
key={`option_${0 + i}`}
value={option}
>{option}
</Option>
))}
</Select>
)}
However, after all the options are selected in the dropdown, I can't figure out how to hide the "Select an Option" message after there are no more options to map. At the top level, I tried to use if value === null then return the dropdown without data but I think that doesn't make sense because I would be technically rendering the dropdown twice. I'm not sure where to go from here. Any help would be greatly appreciated.
I hope i am understanding correctly and without too much context, can't you try the following:
Display Select an Option with more
Assuming once the user selects an option, you are updating a state or updating something. When you update that state/variable, we can be sure to hide the default option.
So displaying this option will be like this:
{(!isBlack && userAnswered) (
<Option
value=""
selected
disabled
hidden
>
<span>Select an option</span>
</Option>
)}
Where userAnswered can be const userAnswered = !!this.state.dropDownSelectAnswers.length for example.
Related
Select product category
<select placeholder='product category'
name="product_category_id"
value={formInput.product_category_id
}
onChange={handleFormInput}>
{categories.map((category) =>(
<option>{category.name}</option>
))}
</select>
</label>
</div>
i have tried to use switch case to return the category.id when i select category.name instead. but it looks quite messy
The value attribute is part of the option tag. Have you tried to add it there like this:
<select placeholder='product category'
name="product_category_id"
onChange={handleFormInput}>
{categories.map((category) =>(
<option value={category.id}>{category.name}</option>
))}
</select>
I have this:
<select
onInput={(e) => onTyping(e.target.name, e.target.value)}
name="site"
id="site"
onChange={handleInputChange}
>
<option value={myData.site}>{myData.site}</option>
<option value="MAR">MARKHAM</option>
<option value="OTT">OTTAWA</option>
</select>
and basically what it is doing is just displaying the options for the locations, plus the one that is already selected. and what I need is to be is if myData.site == mar then display Ottawa, and Markham as the selected option, and vice versa for Ottawa. I tried to do a script inside the react return, but it doesn't like it. how can I do this?
You can conditionally render an element using ternary or logical operators inside of curly brackets
<option value={myData.site}>{myData.site}</option>
{myData.site == 'mar' && <option value="MAR">MARKHAM</option>}
{myData.site == 'ott' && <option value="OTT">OTTAWA</option>}
The HTML select element uses an attribute size to determine how many rows should be visible at one time in a scrolling select element.
The code below uses size="4" to show 4 options at once.
I would like to know how to get that same functionality using the Ant Design Select component in a React app.
I've tried setting the attributes size and multiple but neither work. I'm open to JavaScript solutions. Any ideas?
working code:
<select size="4">
<option id="apple" selected>Apple</option>
<option id="orange">Orange</option>
<option id="pineapple">Pineapple</option>
<option id="banana">Banana</option>
</select>
an example code of antd :
const { Select } = antd;
const { Option } = Select;
ReactDOM.render(
<Select
showSearch
style={{ width: 200 }}
placeholder="Search to Select"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
filterSort={(optionA, optionB) =>
optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
}
>
<Option value="1">Not Identified</Option>
<Option value="2">Closed</Option>
<Option value="3">Communicated</Option>
<Option value="4">Identified</Option>
<Option value="5">Resolved</Option>
<Option value="6">Cancelled</Option>
</Select>,
mountNode,
);
The antd Select is built on top of the rc-select package instead of the browser's own select so just passing select attributes won't work.
The component is designed with one section that shows the current selected items and allows the user to type and another section that shows the list of options. It sounds like you want the list of options to be the only section? And users just select or deselect by scrolling the list.
I'm only part way there but hopefully this helps.
mode="multiple" allows for multiple selections
open={true} causes the options list to be shown at all times. Note that this is considered an overlay and will cover other contents, so you'll need to fix some styling.
listHeight is the closest to what you are asking for, but this takes a number of pixels instead of a number of rows. Each option is 32px at the standard size, so you would want 4 * 32 or 128.
import "antd/dist/antd.css";
import { Select } from "antd";
const { Option } = Select;
export default () => (
<Select
style={{ width: 200 }}
placeholder="Hide Me"
mode="multiple"
open={true}
listHeight={128}
>
<Option value="1">Not Identified</Option>
<Option value="2">Closed</Option>
<Option value="3">Communicated</Option>
<Option value="4">Identified</Option>
<Option value="5">Resolved</Option>
<Option value="6">Cancelled</Option>
</Select>
);
I haven't figured out how to hide the top section with the current selections. You could do it with CSS but there should be a better way.
Hi guys anyone know how to add input and button inside select
This is my code
<select
className="w3-select w3-border"
name="country"
onChange={onChange}
>
<option value="DEFAULT" selected disabled hidden>
Select Country :
</option>
{allcountry.map((item, index) => {
return (
<option key={index} value={item.countryname}>
{item.countryname}
</option>
);
})}
</select>
I want add input and button inside the Select Country , so when I input the allcountry state will update, Thank you :D
I have ENUMS as listed below
export declare enum UserStatus {
NEW = "NEW",
REGISTERED = "REGISTERED"
}
How do i ensure that i can use this dynamic way as dropdown items of select tag. I searched online at several sites and didnt find a suitable answer. Can someone please help.
Currently i am hardcoding this way.
<select value={selectedUserStatus} onChange={onUserStatusSelect}>
<option
aria-selected="true"
key={UserStatus.NEW}
value={UserStatus.NEW}
>
{UserStatus.NEW}
</option>
<option
aria-selected="true"
key={UserStatus.REGISTERED}
value={UserStatus.REGISTERED}
>
{UserStatus.REGISTERED}
</option>
</select>
You can also use:
<select value={selectedUserStatus} onChange={onUserStatusSelect}>
Object.values(UserStatus).map(value =>
<option
aria-selected="true"
key={value]}
value={value}
>
{value}
</option>
)
</select>
If it's JSX syntax you should be able to replace the mark-up inside of the element with an array of JSX elements like so:
<select value={selectedUserStatus} onChange={onUserStatusSelect}>
Object.keys(UserStatus).map(key => (
<option
aria-selected="true"
key={UserStatus[key]}
value={UserStatus[key]}
>
{UserStatus[key]}
</option>
)
)
</select>