@instructure/ui-select 10.11.1-snapshot-17 → 10.11.1-snapshot-18

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.11.1-snapshot-17](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-17) (2025-02-21)
+## [10.11.1-snapshot-18](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-18) (2025-02-21)
 
 
 ### Bug Fixes
@@ -14,6 +14,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **ui-popover, ui-select:** allow overriding Select's dropdown border ([90d59d3](https://github.com/instructure/instructure-ui/commit/90d59d3c3689c3a1500c37db363fa43c1b8403d7))
+* **ui-select,ui-simple-select:** add support for rendering selected option's before and after content in Select and SimpleSelect input ([87dc52d](https://github.com/instructure/instructure-ui/commit/87dc52dcd2a23acfe50856c05b8ff28c1046f85a))
 
 
 

package/es/Select/__new-tests__/Select.test.js

@@ -34,6 +34,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check';
 import Select from '../index';
 import SelectExamples from '../__examples__/Select.examples';
 import * as utils from '@instructure/ui-utils';
+import { IconAddLine, IconCheckSolid, IconDownloadSolid, IconEyeSolid } from '@instructure/ui-icons';
 const defaultOptions = ['foo', 'bar', 'baz'];
 const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
   id: opt,
@@ -43,6 +44,151 @@ const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt =
   isSelected: opt === selected,
   isDisabled: opt === disabled
 }, opt));
+const optionsWithBeforeContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderBeforeLabel: 'XY'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+}];
+const groupOptionsWithBeforeContent = {
+  Options1: [{
+    id: 'opt1',
+    label: 'Text1',
+    renderBeforeLabel: 'XY'
+  }, {
+    id: 'opt2',
+    label: 'Icon1',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+  }, {
+    id: 'opt3',
+    label: 'Colored Icon1',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+  }],
+  Options2: [{
+    id: 'opt4',
+    label: 'Text2',
+    renderBeforeLabel: 'AB'
+  }, {
+    id: 'opt5',
+    label: 'Icon2',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconAddLine, null)
+  }, {
+    id: 'opt6',
+    label: 'Colored Icon2',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconDownloadSolid, null)
+  }]
+};
+const optionsWithAfterContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderAfterLabel: 'XY'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+}];
+const groupOptionsWithAfterContent = {
+  Options1: [{
+    id: 'opt1',
+    label: 'Text1',
+    renderAfterLabel: 'XY'
+  }, {
+    id: 'opt2',
+    label: 'Icon1',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+  }, {
+    id: 'opt3',
+    label: 'Colored Icon1',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+  }],
+  Options2: [{
+    id: 'opt4',
+    label: 'Text2',
+    renderAfterLabel: 'AB'
+  }, {
+    id: 'opt5',
+    label: 'Icon2',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconAddLine, null)
+  }, {
+    id: 'opt6',
+    label: 'Colored Icon2',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconDownloadSolid, null)
+  }]
+};
+const optionsWithBeforeAndAfterContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderBeforeLabel: 'XY',
+  renderAfterLabel: 'ZZ'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null),
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null),
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+}];
+const getOptionsWithBeforeContent = selected => optionsWithBeforeContent.map(opt => /*#__PURE__*/React.createElement(Select.Option, Object.assign({}, opt, {
+  key: opt.id,
+  isSelected: opt.id === selected
+})));
+const getGroupOptionsWithBeforeContent = selected => {
+  return Object.keys(groupOptionsWithBeforeContent).map((key, index) => {
+    return /*#__PURE__*/React.createElement(Select.Group, {
+      key: index,
+      renderLabel: key
+    }, groupOptionsWithBeforeContent[key].map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+      id: opt.id,
+      key: opt.id,
+      value: opt.label,
+      renderBeforeLabel: opt.renderBeforeLabel,
+      isSelected: opt.id === selected
+    })));
+  });
+};
+const getOptionsWithAfterContent = selected => optionsWithAfterContent.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+  id: opt.id,
+  key: opt.id,
+  value: opt.label,
+  renderAfterLabel: opt.renderAfterLabel,
+  isSelected: opt.id === selected
+}));
+const getGroupOptionsWithAfterContent = selected => {
+  return Object.keys(groupOptionsWithAfterContent).map((key, index) => {
+    return /*#__PURE__*/React.createElement(Select.Group, {
+      key: index,
+      renderLabel: key
+    }, groupOptionsWithAfterContent[key].map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+      id: opt.id,
+      key: opt.id,
+      value: opt.label,
+      renderAfterLabel: opt.renderAfterLabel,
+      isSelected: opt.id === selected
+    })));
+  });
+};
+const getOptionsWithBeforeAndAfterContent = selected => optionsWithBeforeAndAfterContent.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+  id: opt.id,
+  key: opt.id,
+  value: opt.label,
+  renderBeforeLabel: opt.renderBeforeLabel,
+  renderAfterLabel: opt.renderAfterLabel,
+  isSelected: opt.id === selected
+}));
 vi.mock('@instructure/ui-utils', async importOriginal => {
   const originalModule = await importOriginal();
   return {
@@ -311,6 +457,159 @@ describe('<Select />', () => {
         expect(inputRef).toHaveBeenCalledWith(input);
       });
     });
+    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to false ", async () => {
+      const _render8 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: false,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render8.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).not.toHaveTextContent('XY');
+    });
+    it('should render arrow in input field when isOptionContentAppliedToInput is set to false', async () => {
+      const _render9 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: false,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render9.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true", async () => {
+      const _render10 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render10.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content', async () => {
+      const _render11 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render11.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true", async () => {
+      const _render12 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithAfterContent[0].label
+        }, getOptionsWithAfterContent('opt1'))),
+        container = _render12.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true but renderBeforeInput is also set", async () => {
+      const _render13 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label,
+          renderBeforeInput: "ZZ"
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render13.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true but renderAfterInput is also set", async () => {
+      const _render14 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithAfterContent[0].label,
+          renderAfterInput: "ZZ"
+        }, getOptionsWithAfterContent('opt1'))),
+        container = _render14.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('XY');
+    });
+    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
+      const _render15 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render15.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).not.toHaveTextContent('XY');
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
+      const _render16 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeAndAfterContent[0].label
+        }, getOptionsWithBeforeAndAfterContent('opt1'))),
+        container = _render16.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
+      const _render17 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeAndAfterContent[0].label
+        }, getOptionsWithBeforeAndAfterContent('opt1'))),
+        container = _render17.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('ZZ');
+    });
+    it('should render arrow in input field when isOptionContentAppliedToInput is set to true but inputValue is not set', async () => {
+      const _render18 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render18.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should not render option's after content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
+      const _render19 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render19.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).not.toHaveTextContent('XY');
+    });
+    it("should render option's before content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
+      const _render20 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithBeforeContent.Options1[0].label
+        }, getGroupOptionsWithBeforeContent('opt1'))),
+        container = _render20.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content and group options', async () => {
+      const _render21 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithBeforeContent.Options1[0].label
+        }, getGroupOptionsWithBeforeContent('opt1'))),
+        container = _render21.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's after content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
+      const _render22 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithAfterContent.Options2[0].label
+        }, getGroupOptionsWithAfterContent('opt4'))),
+        container = _render22.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('AB');
+    });
   });
   describe('list', () => {
     it('should set aria-selected on options with isSelected={true}', () => {
@@ -356,12 +655,12 @@ describe('<Select />', () => {
     describe('should fire onRequestShowOptions', () => {
       it('when root is clicked', async () => {
         const onRequestShowOptions = vi.fn();
-        const _render8 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render23 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          container = _render8.container,
-          rerender = _render8.rerender;
+          container = _render23.container,
+          rerender = _render23.rerender;
         const icon = container.querySelector('svg[name="IconArrowOpenDown"]');
         const label = screen.getByText('Choose an option');
         expect(icon).toBeInTheDocument();
@@ -386,11 +685,11 @@ describe('<Select />', () => {
       });
       it('when input is clicked', async () => {
         const onRequestShowOptions = vi.fn();
-        const _render9 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render24 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          rerender = _render9.rerender;
+          rerender = _render24.rerender;
         const input = screen.getByLabelText('Choose an option');
         await userEvent.click(input);
         await waitFor(() => {
@@ -424,11 +723,11 @@ describe('<Select />', () => {
       });
       it('when space is pressed', async () => {
         const onRequestShowOptions = vi.fn();
-        const _render10 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render25 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          rerender = _render10.rerender;
+          rerender = _render25.rerender;
         const input = screen.getByLabelText('Choose an option');
         await userEvent.type(input, '{space}');
         await waitFor(() => {
@@ -448,12 +747,12 @@ describe('<Select />', () => {
     describe('should fire onRequestHideOptions', () => {
       it('when root is clicked and isShowingOptions is true', async () => {
         const onRequestHideOptions = vi.fn();
-        const _render11 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render26 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
             onRequestHideOptions: onRequestHideOptions
           }, getOptions())),
-          container = _render11.container;
+          container = _render26.container;
         const icon = container.querySelector('svg[name="IconArrowOpenUp"]');
         const label = screen.getByText('Choose an option');
         expect(icon).toBeInTheDocument();
@@ -483,12 +782,12 @@ describe('<Select />', () => {
       });
       it('when input is clicked', async () => {
         const onRequestHideOptions = vi.fn();
-        const _render12 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render27 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
             onRequestHideOptions: onRequestHideOptions
           }, getOptions())),
-          rerender = _render12.rerender;
+          rerender = _render27.rerender;
         const input = screen.getByLabelText('Choose an option');
         await userEvent.click(input);
         await waitFor(() => {
@@ -573,8 +872,8 @@ describe('<Select />', () => {
     it.each(generatedComponents)('should be accessible with example: $description', async ({
       content
     }) => {
-      const _render13 = render(content),
-        container = _render13.container;
+      const _render28 = render(content),
+        container = _render28.container;
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);
     });

package/es/Select/index.js

@@ -430,27 +430,85 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       inline: false
     })));
   }
+  renderContentBeforeOrAfterInput(position) {
+    for (const child of this.childrenArray) {
+      if (matchComponentTypes(child, [Group])) {
+        // Group found
+        const options = this.getGroupChildrenArray(child);
+        for (const option of options) {
+          if (option.props.isSelected) {
+            return position === 'before' ? option.props.renderBeforeLabel : option.props.renderAfterLabel ? option.props.renderAfterLabel : this.renderIcon();
+          }
+        }
+      } else {
+        // Ungrouped option found
+        if (child.props.isSelected) {
+          return position === 'before' ? child.props.renderBeforeLabel : child.props.renderAfterLabel ? child.props.renderAfterLabel : this.renderIcon();
+        }
+      }
+    }
+    // if no option with isSelected is found
+    if (position === 'after') {
+      return this.renderIcon();
+    }
+    return void 0;
+  }
+  handleInputContentRender(renderLabelInput, inputValue, isOptionContentAppliedToInput, position, defaultReturn) {
+    const isInputValueEmpty = !inputValue || inputValue === '';
+    if (renderLabelInput && isOptionContentAppliedToInput) {
+      if (!isInputValueEmpty) {
+        return this.renderContentBeforeOrAfterInput(position);
+      }
+      return renderLabelInput;
+    }
+    if (isOptionContentAppliedToInput) {
+      if (isInputValueEmpty) {
+        return defaultReturn;
+      }
+      return this.renderContentBeforeOrAfterInput(position);
+    }
+    if (renderLabelInput) {
+      return renderLabelInput;
+    }
+    return defaultReturn;
+  }
+  handleRenderBeforeInput() {
+    const _this$props8 = this.props,
+      renderBeforeInput = _this$props8.renderBeforeInput,
+      inputValue = _this$props8.inputValue,
+      isOptionContentAppliedToInput = _this$props8.isOptionContentAppliedToInput;
+    return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
+    );
+  }
+  handleRenderAfterInput() {
+    const _this$props9 = this.props,
+      renderAfterInput = _this$props9.renderAfterInput,
+      inputValue = _this$props9.inputValue,
+      isOptionContentAppliedToInput = _this$props9.isOptionContentAppliedToInput;
+    return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
+    );
+  }
   renderInput(data) {
     const getInputProps = data.getInputProps,
       getTriggerProps = data.getTriggerProps;
-    const _this$props8 = this.props,
-      renderLabel = _this$props8.renderLabel,
-      inputValue = _this$props8.inputValue,
-      placeholder = _this$props8.placeholder,
-      isRequired = _this$props8.isRequired,
-      shouldNotWrap = _this$props8.shouldNotWrap,
-      size = _this$props8.size,
-      isInline = _this$props8.isInline,
-      width = _this$props8.width,
-      htmlSize = _this$props8.htmlSize,
-      messages = _this$props8.messages,
-      renderBeforeInput = _this$props8.renderBeforeInput,
-      renderAfterInput = _this$props8.renderAfterInput,
-      onFocus = _this$props8.onFocus,
-      onBlur = _this$props8.onBlur,
-      onInputChange = _this$props8.onInputChange,
-      onRequestHideOptions = _this$props8.onRequestHideOptions,
-      rest = _objectWithoutProperties(_this$props8, _excluded2);
+    const _this$props10 = this.props,
+      renderLabel = _this$props10.renderLabel,
+      inputValue = _this$props10.inputValue,
+      placeholder = _this$props10.placeholder,
+      isRequired = _this$props10.isRequired,
+      shouldNotWrap = _this$props10.shouldNotWrap,
+      size = _this$props10.size,
+      isInline = _this$props10.isInline,
+      width = _this$props10.width,
+      htmlSize = _this$props10.htmlSize,
+      messages = _this$props10.messages,
+      renderBeforeInput = _this$props10.renderBeforeInput,
+      renderAfterInput = _this$props10.renderAfterInput,
+      onFocus = _this$props10.onFocus,
+      onBlur = _this$props10.onBlur,
+      onInputChange = _this$props10.onInputChange,
+      onRequestHideOptions = _this$props10.onRequestHideOptions,
+      rest = _objectWithoutProperties(_this$props10, _excluded2);
     const interaction = this.interaction;
     const passthroughProps = omitProps(rest, Select.allowedProps);
     const _getTriggerProps = getTriggerProps({
@@ -492,8 +550,8 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       isRequired,
       shouldNotWrap,
       display: isInline ? 'inline-block' : 'block',
-      renderBeforeInput,
-      renderAfterInput: renderAfterInput || this.renderIcon(),
+      renderBeforeInput: this.handleRenderBeforeInput(),
+      renderAfterInput: this.handleRenderAfterInput(),
       // If `inputValue` is provided, we need to pass a default onChange handler,
       // because TextInput `value` is a controlled prop,
       // and onChange is not required for Select
@@ -506,13 +564,13 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     return jsx(TextInput, Object.assign({}, triggerProps, getInputProps(inputProps)));
   }
   render() {
-    const _this$props9 = this.props,
-      constrain = _this$props9.constrain,
-      placement = _this$props9.placement,
-      mountNode = _this$props9.mountNode,
-      assistiveText = _this$props9.assistiveText,
-      isShowingOptions = _this$props9.isShowingOptions,
-      styles = _this$props9.styles;
+    const _this$props11 = this.props,
+      constrain = _this$props11.constrain,
+      placement = _this$props11.placement,
+      mountNode = _this$props11.mountNode,
+      assistiveText = _this$props11.assistiveText,
+      isShowingOptions = _this$props11.isShowingOptions,
+      styles = _this$props11.styles;
     // clear temporary option store
     this._optionIds = [];
     const highlightedOptionId = this.highlightedOptionId;
@@ -565,7 +623,8 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
   placement: 'bottom stretch',
   constrain: 'window',
   shouldNotWrap: false,
-  scrollToHighlightedOption: true
+  scrollToHighlightedOption: true,
+  isOptionContentAppliedToInput: false
 }, _Select.Option = Option, _Select.Group = Group, _Select)) || _class) || _class) || _class);
 export default Select;
 export { Select };

package/es/Select/props.js

@@ -51,6 +51,7 @@ const propTypes = {
   width: PropTypes.string,
   htmlSize: PropTypes.number,
   visibleOptionsCount: PropTypes.number,
+  isOptionContentAppliedToInput: PropTypes.bool,
   optionsMaxHeight: PropTypes.string,
   optionsMaxWidth: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
@@ -73,5 +74,5 @@ const propTypes = {
   shouldNotWrap: PropTypes.bool,
   scrollToHighlightedOption: PropTypes.bool
 };
-const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];
+const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'isOptionContentAppliedToInput', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];
 export { propTypes, allowedProps };