I would like to compose a custom RadioGroup element as seen in this example. Ideally I'd like to have an Avatar as a sibling to the radio element of the control pro. Im stumbling on this JS warning or at least understanding the root of why inputRef cant spread to this element.
React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element.
As you can see in the example the custom control prop breaks the RadioGroup functionality making it multi-select. Is this custom Radio component possible?
`<Field name="bestFramework" component={RadioGroup}>
<FormControlLabel
control={
<span>
<Radio value="react" />
<Avatar
alt="react"
src="https://image.flaticon.com/icons/svg/53/53058.svg"
/>
</span>
}
label="React"
value="react"
/>
<Radio value="angular" label="Angular" />
<Radio value="ember" label="Ember" />
</Field>`
Related
I have a common custom component (a <MenuItem /> from Material-UI) that is wrapped in React.forwardRef. I use this in many places for displaying items in <Menu /> components - sometimes a ref is passed, in other cases not.
I want this component to have a <Tooltip /> but I find that the Tooltip does not display on the first instance of the common component in a Menu (but does show on other instances).
If i remove the prop innerRef={ref} from the <MenuItem /> in my component, that does fix it - but I don't quite understand why?
I think I could resolve this by wrapping the <MenuItem /> in e.g a <span />, but I'm keen to understand what is going on here and why the Tooltip is not showing?
https://codesandbox.io/s/new-fire-fngcof?file=/src/App.tsx
There is no property named innerRef in MUI or React.
Change that to ref and everything will work as expected.
<Tooltip title={props.tooltipTitle}>
<MenuItem ref={ref}>Menu item</MenuItem>
</Tooltip>
If you are eager to know what is innerRef, see this question.
I'm using MUI for the first time on a project. Trying to get InputAdornment to show a magnifying glass svg icon inside a TextInput. I'm following the example here: https://mui.com/components/text-fields/
Regardless of the content of the adornment, I cannot get anything to show up in the UI. In the inspector, the input adornment attribute looks like this endadornment="[object Object]"
My code is like this:
<TextField
defaultValue={''}
inputProps={{
placeholder: 'Search',
endAdornment: <InputAdornment position="end">any</InputAdornment>
}}
onChange={handleChange}
/>
Answered by cris_b in a comment. Turns out there is an InputProps prop and an inputProps prop on TextField.
The difference between the two according to the MUI text-field API documentation:
inputProps: object
Attributes applied to the input element.
InputProps: object
Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
For the code below,
<Form.Group>
<Form.Control>
isInvalid
as={
forwardRef(() => (<div>Report</div>))
}
<Form.Control.Feedback type="invalid">Invalid Report</Form.Control.Feedback>
</Form.Group>
The Feedback is not activated even though the Form.Control has the isInvalid prop set to true. I've noticed that it only happens if I pass a custom component using forwardRef().
Is there any other way I can pass a custom control component so that the error classes are added to it?
Problem recreation here - https://codesandbox.io/s/react-bootstrap-demo-forked-5jdpn?file=/src/App.js
I'm following various examples from https://material-ui.com/components/autocomplete/ to create a custom autocomplete. I'm trying to use the renderInput property to use a custom input component. All of the examples I find use the TextField component, but I'd like to use a regular input component.
Problem is, the options are never displayed. I've created a demonstration here (swap renderInput with renderInputWORKING to see working version):
https://codesandbox.io/s/epic-johnson-oxy7b?file=/src/App.tsx
with the following code in renderInput:
const renderInput = (params: AutocompleteRenderInputParams) => {
console.log(params);
const { InputLabelProps, inputProps, InputProps } = params;
return (
<div>
<label {...InputLabelProps}>foo</label>
<input {...InputProps} {...inputProps} />
</div>
);
};
How can I use the <input /> component for renderInput prop on <Autocomplete />?
UPDATE
The 4.10.1 release of Material-UI (on June 1, 2020) included a new example in the documentation for this exact case: https://material-ui.com/components/autocomplete/#custom-input.
Pull request: https://github.com/mui-org/material-ui/pull/21257
The most useful example to look at in the documentation is the Customized Autocomplete example which uses InputBase instead of TextField. This example contains the following code for renderInput:
renderInput={(params) => (
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
className={classes.inputBase}
/>
)}
The InputProps passed to TextField are placed on a div that wraps the <input>, so most of those props are not appropriate to put directly on the <input> element as you were. In the code above from the documentation example, you can see that it only uses one thing from params.InputProps which is the ref. This ref is used for controlling the anchor element for the listbox of options. A ref is also placed on the <input> itself, but that ref is used for very different purposes. With your code, only one of those refs was getting used.
Below is a working example (based on the Combo Box example since your sandbox has a lot of other customizations that aren't directly related to this question) that uses <input> instead of TextField:
import React from "react";
import Autocomplete from "#material-ui/lab/Autocomplete";
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<div ref={params.InputProps.ref}>
<label {...params.InputLabelProps}>My Label </label>
<input {...params.inputProps} autoFocus />
</div>
)}
/>
);
}
This is a little bizarre of a problem and I haven't been able to track down the issue. I have a checkbox / input combo I created using Semantic-UI React (Form.Checkbox). The checkbox portion is added to the input, think addon, for a little combo input situation. Desired behavior is when the checkbox is checked it allows the user to type input into the input portion of the combo input. The checkbox's state is managed in the component's local state.
If I just include this code:
<Form.Field className="field">
<label>{field.label}</label>
<Input
{...field.input}
label={{ basic: true, content: <Checkbox
onChange={() => this.setState({sendEmail: !this.state.sendEmail})}
checked={this.state.sendEmail} />,
style: {'borderRight': '0px'}
}}
disabled={!this.state.sendEmail}
labelPosition='left'
placeholder='Email Address'
/>
</Form.Field>
in the jsx (render function) for the component, the toggling actually happens, state is managed properly etc. But when I put the same code into a function to render back the same input like so:
renderCheckboxInputField(field){
return(
<div>
<Form.Field className="field">
<label>{field.label}</label>
<Input
{...field.input}
label={{ basic: true, content: <Checkbox
onChange={() => this.setState({sendEmail: !this.state.sendEmail})}
checked={this.state.sendEmail} />,
style: {'borderRight': '0px'}
}}
disabled={!this.state.sendEmail}
labelPosition='left'
placeholder='Email Address'
/>
</Form.Field>
</div>
);
}
and call it from here:
<Grid.Column>
<Field
name="email"
label="Send Email"
component={this.renderCheckboxInputField}
/>
</Grid.Column>
the checkbox doesn't actually visually toggle, though the state is being updated properly. You might ask why not just keep it in the first location where it already works, but a) for reusability I placed it within the function, and b) I wanted to include it this way inside of the <Field /> component at the bottom because I am using Redux Form for validation on the input portion of the checkbox / input combo I made.
So for some clarification the <Field /> component comes from Redux Form. The <Form.Field /> pertains to a Semantic-UI React component. And all of the hacky stuff inside of the <Input /> component's label field is me just customizing the input to look as I desire.
You are calling this.renderCheckboxInputField without any params, but in function definition you pass 'field' and using it inside