Eui: EuiSuperSelect into Modal can't change value

[frankjar]

Hi,
i'm trying to use EuiSuperSelect into a EuiModal and the value change doesn't work : no change at all.

Here is the code to duplicate the issue :

import React, { Component, Fragment } from "react";
import {
  EuiOverlayMask,
  EuiModal,
  EuiModalHeader,
  EuiModalHeaderTitle,
  EuiModalBody,
  EuiModalFooter,
  EuiButtonEmpty,
  EuiSuperSelect,
  EuiSpacer,
  EuiText
} from "@elastic/eui";

 class SuperSelectEncapsulation extends Component {
  constructor(props) {
    super(props);

    this.options = [
      {
        value: "option_one",
        inputDisplay: "Option one",
        dropdownDisplay: (
          <Fragment>
            <strong>Option one</strong>
            <EuiSpacer size="xs" />
            <EuiText size="s" color="subdued">
              <p className="euiTextColor--subdued">
                Has a short description giving more detail to the option.
              </p>
            </EuiText>
          </Fragment>
        )
      },
      {
        value: "option_two",
        inputDisplay: "Option two",
        dropdownDisplay: (
          <Fragment>
            <strong>Option two</strong>
            <EuiSpacer size="xs" />
            <EuiText size="s" color="subdued">
              <p className="euiTextColor--subdued">
                Has a short description giving more detail to the option.
              </p>
            </EuiText>
          </Fragment>
        )
      },
      {
        value: "option_three",
        inputDisplay: "Option three",
        dropdownDisplay: (
          <Fragment>
            <strong>Option three</strong>
            <EuiSpacer size="xs" />
            <EuiText size="s" color="subdued">
              <p className="euiTextColor--subdued">
                Has a short description giving more detail to the option.
              </p>
            </EuiText>
          </Fragment>
        )
      }
    ];

    this.state = {
      value: ""
    };
  }

  onChange = value => {
    this.setState({ value });
  };

  render() {
    return (
      <EuiSuperSelect
        options={this.options}
        valueOfSelected={this.state.value}
        onChange={this.onChange}
        itemLayoutAlign="top"
        hasDividers
      />
    );
  }
}

const TestSuperSelect = () => {
  return (
      <EuiOverlayMask>
      <EuiModal>
        <EuiModalBody>
          <SuperSelectEncapsulation />
        </EuiModalBody>
      </EuiModal>
    </EuiOverlayMask>
  );
};

export default TestSuperSelect

I'm using the EuiSuperSelect example founded here https://elastic.github.io/eui/#/forms/superselect .

Note that the EuiSelect works fine.

Do you have an idea? thx a lot

• React v16.7.0
• @elastic/eui : 6.7.4
• react scripts : 2.1.3

[chandlerprall]

EuiModal's focus trap is preventing the super select's option box from receiving events as it is rendered at the bottom of the DOM through a portal. I tested this with EuiComboBox as well, and selecting a combo box option with the mouse does not work for the same reason, though keyboard navigation of options works as that selection/focus is simulated; keyboard navigation of the super select options does not work.