[DropDownMenu] [SelectField] Add defaultText prop shown when there's no item with the corresponding value

[zalmoxisus]

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

Redo of #4822.

Normally (at least accordingly to HTML specs), a select box shouldn't be empty, unless you there's an empty option, even if the value doesn't correspond to any item. So, you can specify a string in defaultText prop to be shown in this case.

[GuillaumeCisco]

Does it work with hintText?
So we should only specify defaultDisplayValue={} and hintText={'my placeholder'}?

[zalmoxisus]

When defaultDisplayValue isn't specified, it will work as in the earlier versions. But when both are specified, they will still overlap each other. Not sure which one we should prioritize , and which to ignore in this case.

[zalmoxisus]

Added the prop also to SelectField, so it will be used only when no hintText and floatingLabelText specified, fixing all the issues.

[GuillaumeCisco]

maybe !(hintText || floatingLabelText) ?

[zalmoxisus]

you're right 👍

[oliviertassinari]

What's the use case for this property?

[zalmoxisus]

Well, for all the cases I have, there's a default action when nothing is selected, but I don't want to keep the select box empty. A simple solution would be to specify the text from the first option here as well, as other people still want this select empty for their cases.

[oliviertassinari]

I'm asking because defaultText doesn't seems to have any impact on the TextField component. And React is throwing a warning about leaking property.

[zalmoxisus]

Snap, you're right. It was intended to be passed for DropDownMenu.

Does this parameter still make sense or we'll use the first option's value?

[oliviertassinari]

we'll use the first option's value?

I think that it would be better without this property. It isn't going to help migrating from a <select /> to a <SelectField />, nor the other way around, right?

[oliviertassinari]

@zalmoxisus As far as I have investigated the issue, we need the <TextField /> to know about the state of the <DropDownMenu />.

But the TextField is a parent of the DropDownMenu. I think that it should be the other way around. Having this order makes use do non-intuitive stuff like:

• Accessing the children value with:

const propsLeaf = children ? children.props : this.props;

• Expose this imperative method:

  /**
   * This method is deprecated but still here because the TextField
   * need it in order to work. TODO: That will be addressed later.
   */
  getInputNode() {
    const root = this.refs.root;

    root.focus = () => {
      if (!this.props.disabled) {
        this.setState({
          open: !this.state.open,
          anchorEl: this.refs.root,
        });
      }
    };

    return root;
  }

[oliviertassinari]

I'm closing this PR as quite old now and inactive. Thanks helping us moving forward.
I have gathered some thought around how we could improve thing here #4891 (comment).
That may require quite some work, so doing on the next branch might be better.