(PDS-511) Bugfix for autocomplete select not staying open when typing

[jilliankeenan]

Previously In the open prop if you supply the boolean value true what we would expect to see is the autocomplete dropdown open the entire time - we are not seeing that it seems that is being ignored.

This PR resolves this issue and fixes the Autocomplete Select dropdown not staying open when it is uncontrolled (for example when being consumed by a form this is where the bug was first noticed).

How to test using Styleguidist

Navigate to FORM -> Uncontrolled paste the following markdown.

const movieOptions = [
  { value: 'american-treasure', label: 'American Treasure' },
  { value: 'ghost-rider', label: 'Ghost Rider' },
  { value: 'point_break', label: 'Point Break' },
];

const initialValues = {
  controlledFirstName: 'Sponge',
  controlledLastName: 'Bob',
  controlledPassword: '',
  controlledFavoriteMovie: '',
  controlledNotARobot: false,
};

/** Mock api call method */
const submitForm = values => values;

class MyPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      values: initialValues,
      submitting: false,
      filteredOptions: [],
    };

    this.onSubmit = this.onSubmit.bind(this);
    this.handleFactValueFilter = this.handleFactValueFilter.bind(this);
  }

  onSubmit(values) {
    this.setState({ submitting: true });

    submitForm(values);

    this.setState({ submitting: false, values });
  }

  handleFactValueFilter(searchTerm) {
    const newFilteredFacts = movieOptions.filter(listOptions => {
      return listOptions.value.toLowerCase().includes(searchTerm.toLowerCase());
    });
    this.setState({ filteredOptions: newFilteredFacts });
  }

  render() {
    const { values, submitting, filteredOptions } = this.state;

    return (
      <Form
        submittable
        cancellable
        initialValues={values}
        submitting={submitting}
        onSubmit={this.onSubmit}
      >
        <Form.Field
          type="text"
          name="controlledFirstName"
          autoComplete="firstname"
          label="First name"
          placeholder="Enter your first name..."
        />
        <Form.Field
          type="text"
          name="controlledLastName"
          autoComplete="lastname"
          label="Last name"
          placeholder="Enter your last name..."
        />
        <Form.Field
          type="password"
          autoComplete="current-password"
          name="controlledPassword"
          label="Password"
          placeholder="Enter your password..."
          description="Please enter your password"
          error="You goofed up now"
        />
        <Form.Field
          type="autocomplete"
          name="controlledFavoriteMovie"
          label="favorite movie"
          placeholder="Choose a movie"
          options={filteredOptions}
          open={filteredOptions.length > 0}
          onFilter={this.handleFactValueFilter}
        />
        <Form.Field
          type="checkbox"
          name="controlledNotARobot"
          label="Not a robot"
          description="Are you a human?"
        />
      </Form>
    );
  }
}

BUG BEHAVIOUR

[chrisleicester]

Great work tracking this down! I thought this whole time it was just weird, expected behavior.