[EuiFormControlLayoutDelimited] EuiSelect elements lose their dropdown arrow

[Zacqary]

When putting an EuiSelect in one of the control slots, the dropdown arrow gets pushed away.

Expected

Actual

This is because the layout control overrides styles on .euiFormControlLayoutIcons that EuiSelect relies on to position its dropdown arrow. To work around this, wrap the <EuiFormControlLayoutDelimited> in a styled div with:

& .euiFormControlLayout__childrenWrapper {
    &:last-of-type {
      position: relative;
      & .euiFormControlLayoutIcons {
        position: absolute;
        padding: 0;
      }
    }
  }

[cchaos]

The delimited form control isn't meant to be used in this manner. It's mean to show a range of multiple values. Instead, you should use the prepend and append mechanisms to add a dropdown for the last option.

<EuiFieldNumber
  prepend="Every"
  append={
    <EuiButtonEmpty
      color="text"
      size="xs"
      iconType="arrowDown"
      iconSide="right"
    >
      days
    </EuiButtonEmpty>
  }
/>

[github-actions[bot]]

👋 This issue hasn't seen activity in 3 days, so we're automatically closing this issue as answered. Please leave a comment if that's not the case, or if you have any remaining questions or issues.