Repository: material-components/material-components-web-react

Issue #895: Floating label on text-field does not move when value prop changes.
Created: 2019-05-27T22:47:16Z

Duplicate issue #910: Input label not floating even though it's populated
Created: 2019-06-06T08:37:24Z
What I'm trying to achieve:
Have a TextField on the page where the Input receives/stores its value in state.
Have a Menu where, when a MenuItem is selected, the value of that menu item is set in the state property that populates the Input.
Code:
          <TextField
            label="Field"
            ref={this.setAnchorElement}
            trailingIcon={<MaterialIcon role="button" icon="arrow_drop_down" />}
            onTrailingIconSelect={e => {
              this.setState({ fieldListOpen: true });
            }}
          >
            <Input
              ref={"input"}
              onClick={e => {
                this.setState({ fieldListOpen: true });
              }}
              onChange={e => {
                this.setState({
                  fieldFilter: e.target.value,
                  fieldListOpen: true
                });
              }}
              value={fieldFilter}
            />
          </TextField>

          <Menu
            open={fieldListOpen}
            onClose={e => {
              this.setState({ fieldListOpen: false });
              // Workaround to ensure that the label floats:
              // this.refs.input.handleBlur();
            }}
            anchorCorner={Corner.BOTTOM_LEFT}
            anchorElement={anchorElement}
          >
            <MenuList>
              {options.map((field, index) => (
                <MenuListItem
                  key={index}
                  onClick={e => {
                    this.setState({
                      selectedField: field,
                      fieldFilter: field.label
                    });
                  }}
                >
                  <MenuListItemText primaryText={field.label} />
                </MenuListItem>
              ))}
            </MenuList>
          </Menu>

Expected Behaviour
When the MenuItem onClick handler sets the state property value, the Input field should be re-rendered with the value populated, and the label should float.
In short, expected behaviour is that if the Input has any value at all, the label should be floating.
Actual Behaviour
The Input field is populated, but the label is not floating despite the fact that Input has a value:

This only happens the first time. If I place my cursor in the Input and then click out again, the label floats correctly. Similarly, the label floats after subsequent menu selections.
Workaround
The workaround is to call the handleBlur function in the Menu onClose handler (see commented out code above).
Am I doing something in the wrong order?
As a side note, I don't fully comprehend the paradigm selected to indicate Menu open/close state (same goes for Dialog). Usually, in React, if fieldListOpen is false above, I don't even include Menu in the render function, ie:
    { fieldListOpen && <Menu ...etc... }

If, however, I don't have that onClose handler, it doesn't quite work properly. Can someone explain to my why this design choice was made?

Closing comment (2019-06-10T22:04:32Z): I believe this is a dupe #895