question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select combobox mode always shows the selected option's value instead of label when used together with Form and the provided this.props.form.getFieldProps method

See original GitHub issue

What you did

Use Select combobox mode together with Form (already wrapped by Form.create()) and the provided this.props.form.getFieldProps method, try to select one option with integer value and string label (e.g. <Option value="1">jack</Option>).

class Test extends Component {
    render() {
        return (
            <Form horizontal>
                <FormItem
                    label="Select 选择器:"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    required>
                    <Select combobox
                            style={{ width: 200 }}
                            {...this.props.form.getFieldProps('name')}>
                        <Option value="1">jack</Option>
                        <Option value="2">lucy</Option>
                        <Option value="3" disabled>disabled</Option>
                        <Option value="yiminghe">yiminghe</Option>
                    </Select>
                </FormItem>
            </Form>
        );
    }
}

Test = Form.create({})(Test);

What you would like to happen

The select shows the option label I selected (e.g. jack).

What actually happened

Yet the select shows the value actually (e.g. 1).

Environment Information

  • The version of antd: 0.12.13

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
HyczZhucommented, Apr 21, 2016

Yes that should solve the problem, and I’ve been already doing so.

Yet I don’t think this is what it’s designed for. While if I use other types of Select in this case, we could set different values for the ‘value’ prop and children, but I just couldn’t do the same for combobox (and the combobox select works well if used alone without Form), I think this is obviously an issue.

3reactions
erdigokcecommented, Apr 23, 2020

Option 's value should be same with Option’s children for combobox

Why there is a requirement for the value and the label specifications separately, since they must be the same? I am on the same page with @HyczZhu . This behavior seems not satisfying Selector component’s expectations.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-select does not show the selected value in the field
The values when selected are stored in the state via portfolioSelector function. The problem is that when i select a value it wasn't...
Read more >
Using Formik to Handle Forms in React - CSS-Tricks
We're going to build a form together in this post. We'll start with a React component then integrate Formik while demonstrating the way...
Read more >
Tutorial - Formik
Welcome to the Formik tutorial. This will teach you everything you need to know to build simple and complex forms in React. If...
Read more >
useController | React Hook Form - Simple React forms validation
Additionally, it shares the same props and methods as Controller . It's useful for creating reusable Controlled input. Props. The following table contains ......
Read more >
A guide to React forms and events using Formik
As you can see in the code block above, the input element has a value of inputValue , which means the value of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found