I'm using Autocomplete with TextField for renderInput throughout my app for form field input, but have one case where I don't want to allow any text input and only permit the selection of one of the dropdown elements.
If I switch to the more natural Select component, however, the styling of the dropdown elements is different. In particular, the width of the options doesn't seem to be inherited from the FormControl element.
If I use Autocomplete and use dev tools in the browser to set the disabled property of the input element, everything behaves as I would like. But if I pass inputProps={{disabled: true}} to TextField, things blow up when I click the dropdown.
Any suggestions?
You should rewrite readOnly attribute of a native input element to true via inputProps of renderInput to achieve the desired result:
<Autocomplete
renderInput={({ inputProps, ...rest }) => <TextField
{...rest}
inputProps={{ ...inputProps, readOnly: true }}
/>
Demo
Related
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
From the documentation, it describes having an uncontrolled field by omitting the value and onChange attribute. The React website says to use a ref on any uncontrolled inputs, but doing this with a TextField only refs its container, a div. What is the recommended way of retrieving the value of an uncontrolled TextField in Material UI? I could use a querySelector to find the element, but that doesn't seem like a proper way.
use inputRef prop on TextField
<TextField inputRef={ref} ... />
you can access its value by this: ref.current.value
A clarification: value deals with controllability, and onChange deals with observability. They are separate from each other.
You only make inputs controlled by setting the value prop. Setting the onChange prop can be used separately to observe the input changes without acquiring control over it, thus, achieving what you are asking for.
The way to provide a ref to the rendered input is via the innerRef prop on the TextField component. Here's the a link to the API where it states that. From there you can access the value of the input as such, ref.current.value
<TextField innerRef={ref} />
I am trying to style the calendar icon (to be specific increase the font-size of the icon) inside material UI's keyboard datepicker text field in React.
<KeyboardDatePicker
keyboard={!this.props.isDisabled}
keyboardIconProps={{ fontSize: "35px" }}
clearable
disabled={this.props.isDisabled}
error={this.state.isError}
helperText={this.state.errorMsg}
pickerRef={node => (this.picker = node)}
InputProps={{ disableUnderline: true, disabled: this.props.isDisabled }}
onError={console.log}
value={this.props.storeValue}
onChange={this.onChangeCallback}
format={this.props.displayFormat}
onBlur={this.onBlurCallback}
disableOpenOnEnter
InputLabelProps={this.inputLabelProps}
disableFuture={this.props.disableFuture}
disablePast={this.props.disablePast}
/>
I tried setting the KeyboardButtonProps but it doesn't seem to set the style of the icon. I searched online and there are no solutions for my problem. Any help would be much appreciated. Cheers!
Assuming that you use KeyBoardDatePicker from #material-ui/pickers
You can change the icon via the keyboardIcon prop which expects a ReactNode as a child.
Basically just add the following prop to your component
keyboardIcon={<SomeReactElement/>}
Here you have a working sandbox
Case:
I have an array of answers which I want to show in the view as radio inputs. When one of the answers is already answered it must be [checked] and if it's [checked] a textarea shows, so far so good.
Next I want to check another radio input and I want the current selected to be deselected and its textarea hidden, then the new selected radio input should be [checked] and it's textarea should show.
I use the FormBuilder and FormArray and have following issues.
I can't use index without intrapolation, I see many examples where the index is used without.
If I select another radio input, first my data disappears and it's not checked and on the second click it get's checked but now both are checked.
- I don't have access to the checked event, I can show it in the view with {{tempVar.checked}} as you can see above, if I use a template variable #tempVar, but I don't have access to it in the textarea below *ngIf="tempVar.checked". If I do use it in the ngIf I get the following error
Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
Questions:
Is this the right approach?
An example of a Reactive Dynamic form with FormBuilder and FormArray with Radio inputs
Here is my code
https://gist.github.com/webwizart/121c85a0f316f47977cc0c99455af7bf
I would think using the tags should be reserved for unique identifiers? I wouldn't be surprised if dom renderer will update all elements with the same id.
Not sure if this will help, but you could use an answer view model instead (containing the same data) but that also has a 'checked' property
This way you can be sure that it will behave as you would expect.
e.g.: (in your component.ts)
let answers = this.question.Question.PossibleAnswers
.map(a =>
{ return Object.assign({}, a, { checked: false });
}
);
then in html you use: 'answer.checked' instead of 'radio.checked'
ps: also you could use ng-container instead of span, so you don't have an extra DOM imprint in your html
It's easy to configure a Div using the form helper for standard input boxes. An example int he manual is...
echo $this->Form->input('User.name', array('div' => 'class_name'));
However, I can't achieve the same thing with dropdown menus?
Can anyone help out as to how to wrap a dropdown with a DIV using the form helper method?
thanks
I imagine you've been building your dropdowns with FormHelper::select, which doesn't include all the sugar of FormHelper::input, like automatic <div /> wrapping, magic error-messages, etc. You can get FormHelper::input to output a dropdown using the following.
$this->Form->input(
'User.country',
array(
'options'=>$arrayOfCountries,
'div'=>'class_name'
)
);
The options parameter indicates to FormHelper::input that you want a dropdown. You could achieve the same effect with the type parameter (ie. 'type'=>'select'), but the options parameter gives the same effect while also taking care of preparing the dropdown's options.