Im trying to set a value / placeholder for Form.Control but nothing works.
<Form.Row>
<Form.Label>Select Operator:</Form.Label>
<Form.Control as="select" value="" name="operator" onChange={this.handleChange} disabled={shouldDisable}>
{
operators.map(operator => {
return <option key={operator}>{operator}</option>
})
}
</Form.Control>
</Form.Row>
I want that the Default value will be Choose Operator... which cannot be selected (not trigger onChange) add value, defaultValue, placeholder didnt work
Reading React-Bootstrap docs there is no such possibility for that. My suggestion is to create a first option where its value is an empty string ''. As well I would suggest to set the value property on Form.Control to follow React guidelines to have a controlled state:
<Form.Row>
<Form.Label>Select Operator:</Form.Label>
<Form.Control as="select" value={this.state.selectedOperator} name="operator" onChange={this.handleChange} disabled={shouldDisable}>
<option key={'initial'} value="">Choose Operator...</option>
{
operators.map(operator => {
return <option key={operator} value={operator}>{operator}</option>
})
}
</Form.Control>
</Form.Row>
Related
I am creating a modal to filter for profiles, on react-bootstrap and redux.
I need to filter to remember it's previous selection every time the user reopen it, even if he returns from another page. It works fine with value based components, such as "range slider" or "text search" because I can grab the previous saved redux store and plug into the component's attribute, such as:
value={rangeValue}
But for radio buttons, I am not sure since the attribute itself, "checked", is its own value.
<Form.Check
inline
label="male"
name="male"
checked <-----------
onChange={(e) => onRadioChange(e)}
/>
I want it to show "checked" only if the user has previously done so. I already have the user choice (whether checked or not) saved in my store, but don't know how to plug it in conditionally.
The returned JSX below
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
...
<Form>
<div className="form_content_wrap">
<Form.Group>
<Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
<Form.Control
type="range"
className="form-control-range"
id="formControlRange"
min="0"
max="100"
value={rangeValue}
onChange={(e) => setRangeValue(e.currentTarget.value)}
/>
</Form.Group>
<Form.Group>
<Form.Label htmlFor="formControlRange">Gender: </Form.Label>
<Form.Check
inline
label="female"
name="female"
onChange={(e) => onRadioChange(e)}
/>
<Form.Check
inline
label="male"
name="male"
checked <<<------- THIS IS WHERE I WANT TO CHANGE
onChange={(e) => onRadioChange(e)}
/>
</Form.Group>
<Form.Group>
<Form.Label>Keyword</Form.Label>
<Form.Control
type="text"
placeholder="search description"
value={descValue}
onChange={(e) => setDescValue(e.currentTarget.value)}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
onClick={onFormSubmit}
style={{ marginRight: "10px" }}
>
Submit
</Button>
<Button variant="primary" type="submit" onClick={onFormClear}>
Clear
</Button>[enter image description here][1]
</div>
</Form>
Thanks
React appears to be smart enough automatically remove the attribute if you set it equal to a Javascript expression that is not truthy. You should be able to just pull this state from your store. See this question for more details.
<Form.Check checked={true} />
<Form.Check checked={false} />
I use a select tag in my application:
<Select
showSearch={false}
defaultValue={["Lucy"]}
mode="multiple"
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>,
document.getElementById("container")
I want to set a default selected value for this Select, to get something like this:
So, when i will open first time this dropdown, i want to have a default value selected in the way like in the image. I tried defaultValue but it does not work as i described., So, how to achive what i described above?
demo: https://codesandbox.io/s/select-with-search-field-ant-design-demo-4f9op?file=/index.js:410-955
You are providing ['Lucy'] (uppercased) as default value but the values provided in the options are 'lucy', 'jack', and 'tom' all lowercased. That is why the Select treats the default value as another value.
Solution either provide the default value same as used in options defaultValue={["lucy"]} or use uppercased values in Option if you want the defaultValue to be uppercased as well.
<Select
showSearch={false}
defaultValue={["lucy"]}
mode="multiple"
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>,
document.getElementById("container")
Codesandbox demo, codesandbox
The option value is 'lucy', and you set the default value to 'Lucy' (with a capital letter). Therefore, the default value does not work. Set the default value to 'lucy'.
I'm to react and I'm getting this error when setting up my drop down list
<FormGroup className="form-group">
<label htmlFor="services_dropdown">Service</label>
<FormControl
id="services_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{serviceDropDown}
</FormControl>
</FormGroup>
<FormGroup>
<label htmlFor="tarifications_dropdown">Tarification</label>
<FormControl
id="tarifications_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{usersDropDown}
</FormControl>
</FormGroup >
The error is giving me a hard time and this is it:
nput is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
usersDropDown and servicesDropDown return a list mapped from a list in state
FormControl defaults to input when as property is not specified.
To use it as a select, you have to provide:
<FormControl
id="tarifications_dropdown"
componentClass="select"
as="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}
>
{usersDropDown}
</FormControl>
Form.Control API in docs
I am updating the options of the select based on the state of my component.
The state is initially set to an empty array but once loaded from an API, the state is updated so the options should update.
While this does happen (and can be seen in the dev tools), it looks like material_select needs to be called to update how it looks.
I can get this to appear correctly by calling $("select").material_select() from the console.
I think that the line causing the issue is here: https://github.com/react-materialize/react-materialize/blob/master/src/Input.js#L38
Is there a way that I can manually call this while inside my component?
Please note that I'm using create-react-app.
<Row>
<Input
id="categories"
type="select"
label="Categories"
multiple={true}
onChange={this.handleChange}
s={12}
>
{this.state.categories.map(category => {
return (
<option key={category._id} value={category._id}>
{category.name}
</option>
);
})}
</Input>
</Row>
You can fix the problem by rendering the Input component once your options arrive from API.
You can initailize your state as null as opposed to empty array:
state = {
categories: null;
}
So in your render method, render the component conditionally (only if options are available):
render() {
return (
<Row>
{this.state.categories ? (
<Input
id="categories"
type="select"
label="Categories"
multiple={true}
onChange={this.handleChange}
s={12}
>
{this.state.categories.map(category => {
return (
<option key={category._id} value={category._id}>
{category.name}
</option>
)
})}
</Input>
) : null}
</Row>
)
}
Trying to set up a control for a select field but even with placeholder set it still always auto selects the first item in the list.
It looks like this...
export function renderSelector({input, label, placeholder, meta:{touched, warning, error}, title, mandatory, fieldValues, fieldItemKeyFunc, fieldItemLabelFunc, props}) {
const mappedData = fieldValues.map(v => ({Id: fieldItemKeyFunc(v), Name: fieldItemLabelFunc(v)}));
let custom = props || {};
return (
<FormGroup controlId={input.name} validationState={touched && error ? 'error' : null}>
<Col xs={12}>
{renderLabel(title, label, mandatory)}
</Col>
<Col xs={12}>
<FormControl componentClass="select" placeholder={placeholder} name={input.name} {...input} {...custom}>
{
mappedData.map((item, index) => {
return (
<option key={index} value={item.Id}>{item.Name}</option>
)
})
}
</FormControl>
<FormControl.Feedback/>
{renderErrBlock(touched, warning, error)}
</Col>
</FormGroup>
);
}
When this renders the selector always starts with the first item selected, instead of the placeholder. How can I fix this?? I tried just adding a default first option and adjusting the css, but for Accessibility that doesn't work that well because the contrast levels
A bit late, but check if adding this option helps you:
<option key='blankChoice' hidden value />
Make sure to check the form value to a blank choice as well:
<Form.Control
value=''
>
You can do something like this:
Add a
<option disabled value={-1} key={-1}>
, and set your
<FormControl value={-1} ...
for a similar effect.
Just dropping a late answer, in case someone finds this useful.
React Bootstrap's Form as='select' doesn't seem to allow placeholder out of the box. Adding a blank value to Form.Control would render the input useless. Adding an extra option above mappedData.map(), as follows would work:
<option key = 'blankChoice' hidden value> --Your placeholder text-- </option>