0

I'm using MUI 4.1.2 I set up a Select which is working except that when an item from the Select is chosen, that item does not show the viewable display after clicking it. I have a log setup and it does log the item that was chosen. 

<FormControl>
                    <Select
                      value={this.state.quoteListName}
                      onChange={this.handleChange}
                      variant="outlined"
                      displayEmpty={true}
                      input={<Input id="QuoteListPlaceholder" />}
                      renderValue={
                        this.state.quoteListName > 0
                          ? undefined
                          : () => <em>Select a Quote List</em>
                      }
                    >
                      <MenuItem value="" disabled>
                        <em>Select a Quote List</em>
                      </MenuItem>

                      {data.me.quoteList.map(item => {
                        return (
                          <MenuItem value={item.name} key={item.name}>
                            {item.name}
                          </MenuItem>
                        );
                      })}
                    </Select>
                  </FormControl>

I found the renderValue code in a stack overflow post. I may have not set that up correctly? It does show the "Select a Quote list" text but that is still showing after an item from the Select is chosen. Note that I did try this.state.quoteListName.length > 0 but it didn't work.

yodude
  • 159
  • 3
  • 5
  • 13
  • Please provide a [CodeSandbox](https://codesandbox.io/s/new) that reproduces your problem, and then I can more quickly provide assistance. – Ryan Cogswell Jul 10 '19 at 15:01
  • Thanks Ryan, I'll get one set up asap. I'll have to figure out how to adapt it to a code sandbox. – yodude Jul 10 '19 at 15:09
  • You should only need a little more code than what you've included in your question (e.g. add in hard-coded data, handleChange implementation). – Ryan Cogswell Jul 10 '19 at 15:10
  • You might find the sandbox I provided in [this answer](https://stackoverflow.com/questions/56958742/cant-change-border-color-of-material-ui-outlinedinput/56958994#56958994) to be a useful starting point if you haven't used CodeSandbox much. – Ryan Cogswell Jul 10 '19 at 15:12
  • Ok, that helps, although I'm using a class based component. I'm looking things over. I think my handleChange is not right. Your example uses an InputLabel to show a placeholder instead of showing "None" from a MenuItem as it is in the docs. Showing the first MenuItem as the placeholder is what I'm trying to do. – yodude Jul 10 '19 at 17:55
  • Ok Ryan, I fixed it. I just had to put {this.state.quoteListName} where I had Select a Quote List in the renderValue prop. Thanks for the link to that sandbox, that helps with the styling, although I may have another question on that soon :-). – yodude Jul 10 '19 at 18:04

0 Answers0