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.

Cannot set the default helperText for Select components in theme

See original GitHub issue

Describe the bug Of course, vanilla mui Select elements do not have helperText; you have to add a FormHelperText to your form control with the helper text as a child. But setting props.MuiFormHelperText.children='default helper text' in my theme only changes the helper text for vanilla FormHelperTexts.

This is necessary because I want to set the helper text to a space ' ' to prevent form resizing, e.g. when a field has error helper text.

To Reproduce Steps to reproduce the behavior:

  1. Go to this forked sandbox
  2. Search for the comment: // HERE: Try commenting the following line. The helper text
  3. … And comment the following line 😃

The additions I made are roughly…

import {
  // ...
  FormControl,
  InputLabel,
  Select as MuiSelect,
  MenuItem,
} from '@material-ui/core'

// ...

const theme = createMuiTheme({
  props: {
    // ...
    MuiFormHelperText: {
      children: 'This should be the default helper text of all Select components',
    },
})

// ...

// In the render function of MainForm
  const formFields = [
    // Default helper text doesn't work here
    <Select
      label="Pick some cities..."
      name="cities"
      required={required.cities}
      data={selectData}
      multiple={true}
      // HERE: Try commenting the following line. The helper text
      helperText="Woah helper text"
    />,
    // Default helper text works here
    <FormControl>
      <InputLabel id="demo">Cities</InputLabel>
      <MuiSelect labelId="demo" fullWidth>
        {selectData.map(({ label, value }) => (
          <MenuItem value={value}>{label}</MenuItem>
        ))}
      </MuiSelect>
      <FormHelperText>{/* Insert helper text here */}</FormHelperText>
    </FormControl>,
  ];

I also removed most of the form components to simplify the example.

Expected behavior Commenting out the line indicated should change the select helperText to 'This should be the default helper text of all Select components'.

Additional context This ‘bug’ is not a super high priority, but it would help with theming.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
lookfirstcommented, Sep 15, 2022

Closing, seems to be a non-issue now.

0reactions
nmay231commented, Mar 24, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

how to set helperText in react-select - Stack Overflow
I am using react-select and TextField Material-UI. Is there possibility to set helperText (small text below component) in react-select like ...
Read more >
React does not recognize the `helperText` prop on a DOM ...
This work. But why i can not use Select and Checkbox components?
Read more >
TextField API - Material UI - MUI
Name Type Default autoComplete string autoFocus bool false classes object
Read more >
Input Components - React-admin - Marmelab
Tip: defaultValue cannot use a function as value. For default values computed at render time, set the defaultValues at the form level.
Read more >
Theming · React Native Paper
By default React Native Paper will apply the Material You theme (MD3) if no theme ... You can change the theme prop dynamically...
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