Develop Reference

Antd Select console error: `children` should be `Select.Option` or `Select.OptGroup` instead of `Option`

I am using a wrapper around Antd Select component.
import { Select as ASelect } from 'antd';
function Select({ children, ...props }) {
return <ASelect {...props}>{children}</ASelect>;
}
function Option({ children, ...props }) {
return <ASelect.Option {...props}>{children}</ASelect.Option>;
}
Select.Option = Option;
Which is throwing the below error where ever this component is used.
Warning: `children` should be `Select.Option` or `Select.OptGroup` instead of `Option`.
Usage:
<Select defaultValue="option1" style={{ width: 120 }}>
{options.map((o) => {
const { key, label } = o;
return (
<Select.Option key={key} value={key}>
{label}
</Select.Option>
);
})}
</Select>
Options Array:
const options = [
{ key: 'option1', label: 'Option 1' },
{ key: 'option2', label: 'Option 2' },
{ key: 'option3', label: 'Option 3' },
];
Live Demo

With the latest version of Antd (5.0.0) you can simply pass options as a prop.
<Select options={options} defaultValue="option1" style={{ width: 120 }} />
Options should now contain value instead of key. ( unique key for every option will be handled by Select component internally )
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
];
children is optional now.
You need to update your base Select implementation as below else you will end up with No Data in the select. ( As you might not use children in every Select instance )
function Select(props) {
return <ASelect {...props} />;
}
Note: options prop is given more priority over children
Working Code (No console warning)

assign value to select in methods in vuejs?

<a-radio-group
#change="changeName"
v-decorator="[
'name',
{ initialValue: 'light' },
]"
>
<a-radio value="iphone">Iphone</a-radio>
<a-radio value="samsung">Samsung</a-radio>
</a-radio-group>
<a-form-item label="Value" :colon="false">
<a-select placeholder="Select a value">
<a-select-option></a-select-option>
</a-select>
</a-form-item>
methods: {
changeName(event) {
var value = event.target.value;
if (value == 'iphone') {
// I want to assign the select-option the value :
//<a-select-option value="ip12">Iphone 12</a-select-option>
// <a-select-option value="ip13">Iphone 13</a-select-option>
} else {
//<a-select-option value="ss10">Samsung note 10</a-select-option>
// <a-select-option value="ss9">Samsung note 9</a-select-option>
}
}
}
How do I change the <a-select-option>s when I select a radio button?

You can compute the <a-select>'s options based on the <a-radio-group>'s value.
Instead of the change-event handler, use a v-model directive on the <a-radio-group> to store the selected brand, and on the <a-select> to store the selected phone:
<template>
<a-radio-group v-model="selectedBrand">
<!-- brands -->
</a-radio-group>
<a-select placeholder="Select a value" v-model="selectedPhone">
<!-- phone options -->
</a-select>
</template>
<script>
export default {
data () {
return {
selectedBrand: '',
selectedPhone: '',
}
}
}
</script>
Add a computed property for the options to show based on the selected brand:
const PHONE_OPTIONS = {
iphone: [
{ value: 'iph12', label: 'Iphone 12' },
{ value: 'iph13', label: 'Iphone 13' },
],
samsung: [
{ value: 'ss10', label: 'Samsung Note 10' },
{ value: 'ss9', label: 'Samsung Note 9' },
],
}
export default {
computed: {
phoneOptions() {
return PHONE_OPTIONS[this.selectedBrand]
},
},
}
Use a watcher on the phone options to automatically select the first one.
export default {
watch: {
phoneOptions(value) {
this.selectedPhone = value?.[0].value
},
},
}
Render the phone options:
<a-select-option v-for="opt in phoneOptions" :key="opt.value" :value="opt.value">
{{ opt.label }}
</a-select-option>
demo

Vue: When importing a particular component I receive a Type Error

I am currently creating a SPA using Vue, and I am using a UI framework called Vue Argon Dashboard Pro
I am trying to import this particular component called Select.
Based on the documentation it says I just need to add the following lines.
import { ElSelect, ElOption } from "element-plus";
export default {
components: {
[ElSelect.name]: ElSelect,
[ElOption.name]: ElOption
}
}
Now when I add them to an isolated page, I would receive the following errors.
[vue-router] Failed to resolve async component default: TypeError:
Object(...) is not a function
[vue-router] uncaught error during route navigation:
TypeError: Object(...) is not a function
These errors aren't giving me any clue what am I doing wrong because I have other pages with other components that are working well, and this component is just the one not working properly.
Here's my Test.vue
<template>
<div class="container">
<el-select placeholder="Single Select" v-model="selects.simple" filterable>
<el-option
v-for="option in selects.languages"
class="select-danger"
:value="option.value"
:label="option.label"
:key="option.label"
>
</el-option>
</el-select>
</div>
</template>
<script>
import { ElSelect, ElOption } from "element-plus";
export default {
name: "TestPage",
components: {
[ElSelect.name]: ElSelect,
[ElOption.name]: ElOption
},
data() {
return {
selects: {
simple: "",
languages: [
{ value: "Bahasa Indonesia", label: "Bahasa Indonesia" },
{ value: "Bahasa Melayu", label: "Bahasa Melayu" },
{ value: "Català", label: "Català" },
{ value: "Dansk", label: "Dansk" },
{ value: "Deutsch", label: "Deutsch" },
{ value: "English", label: "English" },
{ value: "Español", label: "Español" },
{ value: "Eλληνικά", label: "Eλληνικά" },
{ value: "Français", label: "Français" },
{ value: "Italiano", label: "Italiano" },
{ value: "Magyar", label: "Magyar" },
{ value: "Nederlands", label: "Nederlands" },
{ value: "Norsk", label: "Norsk" },
{ value: "Polski", label: "Polski" },
{ value: "Português", label: "Português" },
{ value: "Suomi", label: "Suomi" },
{ value: "Svenska", label: "Svenska" },
{ value: "Türkçe", label: "Türkçe" },
{ value: "Íslenska", label: "Íslenska" },
{ value: "Čeština", label: "Čeština" },
{ value: "Русский", label: "Русский" },
{ value: "ภาษาไทย", label: "ภาษาไทย" },
{ value: "中文 (简体)", label: "中文 (简体)" },
{ value: 'W">中文 (繁體)', label: 'W">中文 (繁體)' },
{ value: "日本語", label: "日本語" },
{ value: "한국어", label: "한국어" }
]
}
};
}
};
</script>
Here is my Router.js file as this was pointed out the issue on the other question raised
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const routes = [
{
path: "/test",
name: "TestPage",
component: () =>
import(/* webpackChunkName: "bundle.test" */ "#/views/Test.vue")
}
];
const router = new Router({
mode: "history",
routes
});
export default router;
Hoping all those details help. Thank you

First option of dropdown select in Formik to disappear after selection is made

I'm using Formik for validating some fields when creating an entity, one of the fields must be a Select.
Here is the code:
const industryOptions = [
{ text: 'Food', value: 'Food' },
{ text: 'Services', value: 'Services' },
{ text: 'Transport', value: 'Transport' },
{ text: 'Software', value: 'Software' },
];
<Field
className="hello-dropdown-create"
name="industry"
as={Select}
selectOnBlur={false}
options={industryOptions}
placeholder="Food service"
onChange={(e, selected) =>
setFieldValue('industry', selected.value)
}
/>
The problem is with the placeholder. I want its text to have a different color, I don't think it is possible to add a css class just for the placeholder in this case, so I was thinking to add an extra option in the dropdown and set it as the first option and make it disappear after the dropdown is opened and an option is selected:
const industryOptions = [
{ text: 'select one', value: 'select one' }, // added extra option here
{ text: 'Food', value: 'Food' },
{ text: 'Services', value: 'Services' },
{ text: 'Transport', value: 'Transport' },
{ text: 'Software', value: 'Software' },
];
Is it possible to set something like <option value="" disabled selected hidden>select one</option> ?
Or other solution to make the text of the placeholder gray and when an option is selected to be black?

React Semanti UI DropDown with onClick Even on individual Options

React Semantic UI has DropDown with properties of OnClick
is it possible to make each selection with different onClick event. Pretty much have each selection to run separate function. so in the following example I need if angular was selected a runs a function that is different than css, or design
const options = [
{ key: 'angular', text: 'Angular', value: 'angular' },
{ key: 'css', text: 'CSS', value: 'css' },
{ key: 'design', text: 'Graphic Design', value: 'design' },
{ key: 'ember', text: 'Ember', value: 'ember' },
{ key: 'html', text: 'HTML', value: 'html' },
{ key: 'ia', text: 'Information Architecture', value: 'ia' },
{ key: 'javascript', text: 'Javascript', value: 'javascript' },
{ key: 'mech', text: 'Mechanical Engineering', value: 'mech' },
]
const DropdownExampleMultipleSelection = () => (
<Dropdown placeholder='Skills' fluid multiple selection options={options} />
)
I tried doing onchange but it gives me undefined value
handleChange = (e) => {
this.setState({value: e.target.value});
console.log('Dropdown changed ' + e.target.value);
return;
}
<Dropdown onChange={(e) => {this.handleChange(e)}} />

Code Sandbox with solution: https://codesandbox.io/s/vvz2yow5k5
class DropdownExampleMultipleSelection extends Component {
handleChange = (e, { value }) => {
// array of selected values
console.log(value);
};
render() {
return (
<Dropdown
placeholder="Skills"
fluid
multiple
selection
options={options}
onChange={this.handleChange}
/>
);
}
}

You can access the values by following:
handleClick = (e, data) => {
console.log(data.value)
console.log(e._targetInst.return.key)
}
data.value will give you all selected values while e._targetInst.return.key will give you key of currently changed element.
Working fiddle: https://stackblitz.com/edit/react-5b24ux?file=index.js
You can view values on each selection by opening the chrome devtools.