I am using a material-ui TextField
to create an input and a label for a typeahead picker type component with downshift.
I've seen the demos, and have got this:
<FormControl fullWidth className={classname}>
<TextField fullWidth InputProps={ inputProps } InputLabelProps={ inputLabelProps } />
</FormControl>
My inputProps are equal to:
const inputProps = getInputProps({ //passed in by {...downshiftProps} on the parent
onChange, onKeyDown, disabled, error, label, value: inputValue,
startAdornment: selectedItems.map(item => ...)
});
const inputLabelProps = getLabelProps({ //passed in by {...downshiftProps} on the parent
disabled, required, error, disabled, shrink: true, id: inputProps.id
});
My predecessor had those inputLabelProps attributes defined on a material-ui InputLabel
component, but in an attempt to get the aria-labelledby attributes working, I've got with a single TextField
.
Printing out the content of the input and label props gives:
//labelProps
{
disabled: false,
error: false,
htmlFor: "downshift-0-input",
id: "downshift-0-label",
required: undefined,
shrink: false
}
//inputProps
{
aria-activedecendant: null,
aria-autocomplete: "list"
aria-controls: null,
aria-labelledby: "downshift-0-label",
autoComplete: "off"
disabled: false,
error: false,
id: "downshift-0-input",
onBlur: f(event),
onChange: f(event),
onKeyDown: f(event),
startAdornment: [],
value: ""
}
My issue is that no label is rendered to the DOM. The closest I get is a div with a label attribute, that wraps the input, but displays nothing.
p.s. I've seen Material-ui textfield with label but I don't think FloatingLAbelText exists anymore? The link in the answers is out of date, and not compatible with the propGetters pattern.
getItemProps
would accept an object with the label property...but it does not. – Pureferret