@dhis2-ui/select 10.12.9 → 10.12.11

package/build/cjs/simple-single-select/menu/filter.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Filter = Filter;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-var _uiConstants = require("@dhis2/ui-constants");
-var _input = require("@dhis2-ui/input");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../../locales/index.js"));
@@ -15,46 +13,41 @@ function Filter(_ref) {
   let {
     ariaControls,
     dataTest,
+    inputRef,
     label,
     placeholder,
-    tabIndex,
     value,
     onChange,
     onKeyDown
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    className: _style.default.dynamic([["3850436710", [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
-  }, /*#__PURE__*/_react.default.createElement(_input.Input, {
-    dense: true,
-    tabIndex: tabIndex,
-    ariaControls: ariaControls,
-    ariaHaspopup: "listbox",
-    ariaLabel: label || _index.default.t('Search options'),
-    dataTest: `${dataTest}-input`,
-    value: value,
-    onChange: _ref2 => {
-      let {
-        value
-      } = _ref2;
-      return onChange(value);
-    },
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+    ref: inputRef,
     type: "text",
     name: "filter",
+    value: value,
     placeholder: placeholder,
-    onKeyDown: (_, e) => onKeyDown(e)
+    "aria-label": label || _index.default.t('Search options'),
+    "aria-controls": ariaControls,
+    "aria-haspopup": "listbox",
+    "data-test": dataTest,
+    onChange: e => onChange(e.target.value),
+    onClick: e => e.stopPropagation(),
+    onKeyDown: e => {
+      e.stopPropagation();
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    },
+    className: "jsx-1122123784" + " " + "filter-input"
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3850436710",
-    dynamic: [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]
-  }, [`div.__jsx-style-dynamic-selector{height:100%;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${_uiConstants.colors.white};}`]));
+    id: "1122123784"
+  }, [".filter-input.jsx-1122123784{-webkit-flex:1;-ms-flex:1;flex:1;border:none;outline:none;background:transparent;font-size:14px;line-height:16px;color:inherit;padding:0;min-width:0;}"]));
 }
 Filter.propTypes = {
   ariaControls: _propTypes.default.string.isRequired,
+  inputRef: _propTypes.default.object.isRequired,
   value: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
   label: _propTypes.default.string,
   placeholder: _propTypes.default.string,
-  tabIndex: _propTypes.default.string,
   onKeyDown: _propTypes.default.func
 };

package/build/cjs/simple-single-select/menu/menu.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _sharedPropTypes = require("../shared-prop-types.js");
 var _empty = require("./empty.js");
-var _filter = require("./filter.js");
 var _loading = require("./loading.js");
 var _noMatch = require("./no-match.js");
 var _optionsList = require("./options-list.js");
@@ -30,10 +29,7 @@ function Menu(_ref) {
     dataTest,
     disabled,
     empty,
-    filterLabel,
-    filterPlaceholder,
     filterValue,
-    filterable,
     hidden,
     labelledBy,
     listBoxRef,
@@ -44,12 +40,9 @@ function Menu(_ref) {
     optionUpdateStrategy,
     selectRef,
     selectedValue,
-    tabIndex,
     onBlur,
     onClose,
-    onEndReached,
-    onFilterChange,
-    onFilterInputKeyDown
+    onEndReached
   } = _ref;
   const [menuWidth, setWidth] = (0, _react.useState)('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -83,18 +76,7 @@ function Menu(_ref) {
       maxHeight
     },
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "menu"
-  }, filterable && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "filter-container"
-  }, /*#__PURE__*/_react.default.createElement(_filter.Filter, {
-    dataTest: `${dataTestPrefix}-filter`,
-    value: filterValue,
-    label: filterLabel,
-    ariaControls: `${name}-listbox`,
-    placeholder: filterPlaceholder,
-    tabIndex: tabIndex,
-    onChange: onFilterChange,
-    onKeyDown: onFilterInputKeyDown
-  })), isEmpty && /*#__PURE__*/_react.default.createElement(_empty.Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/_react.default.createElement(_noMatch.NoMatch, null, noMatchText), /*#__PURE__*/_react.default.createElement("div", {
+  }, isEmpty && /*#__PURE__*/_react.default.createElement(_empty.Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/_react.default.createElement(_noMatch.NoMatch, null, noMatchText), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "listbox-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "listbox-wrapper"
@@ -135,10 +117,7 @@ Menu.propTypes = {
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   empty: _propTypes.default.node,
-  filterLabel: _propTypes.default.string,
-  filterPlaceholder: _propTypes.default.string,
   filterValue: _propTypes.default.string,
-  filterable: _propTypes.default.bool,
   hidden: _propTypes.default.bool,
   labelledBy: _propTypes.default.string,
   loading: _propTypes.default.bool,
@@ -149,10 +128,7 @@ Menu.propTypes = {
   optionUpdateStrategy: _propTypes.default.oneOf(['off', 'polite', 'assertive']),
   selectRef: _propTypes.default.instanceOf(HTMLElement),
   selectedValue: _propTypes.default.string,
-  tabIndex: _propTypes.default.string,
   onBlur: _propTypes.default.func,
   onClose: _propTypes.default.func,
-  onEndReached: _propTypes.default.func,
-  onFilterChange: _propTypes.default.func,
-  onFilterInputKeyDown: _propTypes.default.func
+  onEndReached: _propTypes.default.func
 };

package/build/cjs/simple-single-select/selected-value/selected-value.js

@@ -8,6 +8,7 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiIcons = require("@dhis2/ui-icons");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
+var _filter = require("../menu/filter.js");
 var _clearButton = require("./clear-button.js");
 var _container = require("./container.js");
 var _placeholder = require("./placeholder.js");
@@ -28,6 +29,11 @@ function SelectedValue(_ref) {
     disabled,
     error,
     expanded,
+    filterLabel,
+    filterPlaceholder,
+    filterRef,
+    filterable,
+    filterValue,
     hasSelection,
     inputMaxHeight,
     labelledBy,
@@ -39,9 +45,12 @@ function SelectedValue(_ref) {
     onBlur,
     onClear,
     onClick,
+    onFilterChange,
+    onFilterInputKeyDown,
     onFocus
   } = _ref;
   const dataTestPrefix = `${dataTest}-selectedvalue`;
+  const showFilter = filterable && expanded;
   return /*#__PURE__*/_react.default.createElement(_container.Container, {
     dataTest: `${dataTestPrefix}-container`,
     ref: comboBoxRef,
@@ -64,7 +73,16 @@ function SelectedValue(_ref) {
   }, prefix && /*#__PURE__*/_react.default.createElement(_prefix.Prefix, {
     dataTest: `${dataTestPrefix}-prefix`,
     prefix: prefix
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), showFilter ? /*#__PURE__*/_react.default.createElement(_filter.Filter, {
+    inputRef: filterRef,
+    ariaControls: `${name}-listbox`,
+    dataTest: `${dataTestPrefix}-filter`,
+    label: filterLabel,
+    placeholder: filterPlaceholder,
+    value: filterValue,
+    onChange: onFilterChange,
+    onKeyDown: onFilterInputKeyDown
+  }) : /*#__PURE__*/_react.default.createElement("div", {
     tabIndex: "-1",
     className: _style.default.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "selected-option-label"
   }, !selectedLabel && !prefix && placeholder && /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, {
@@ -91,6 +109,7 @@ function SelectedValue(_ref) {
 SelectedValue.propTypes = {
   clearText: _propTypes.default.string.isRequired,
   comboBoxId: _propTypes.default.string.isRequired,
+  filterRef: _propTypes.default.object.isRequired,
   name: _propTypes.default.string.isRequired,
   selectedLabel: _propTypes.default.string.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
@@ -104,6 +123,10 @@ SelectedValue.propTypes = {
   disabled: _propTypes.default.bool,
   error: _propTypes.default.bool,
   expanded: _propTypes.default.bool,
+  filterLabel: _propTypes.default.string,
+  filterPlaceholder: _propTypes.default.string,
+  filterValue: _propTypes.default.string,
+  filterable: _propTypes.default.bool,
   hasSelection: _propTypes.default.bool,
   inputMaxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   labelledBy: _propTypes.default.string,
@@ -115,5 +138,7 @@ SelectedValue.propTypes = {
   onBlur: _propTypes.default.func,
   onClear: _propTypes.default.func,
   onClick: _propTypes.default.func,
+  onFilterChange: _propTypes.default.func,
+  onFilterInputKeyDown: _propTypes.default.func,
   onFocus: _propTypes.default.func
 };

package/build/cjs/simple-single-select/simple-single-select.js

@@ -67,7 +67,6 @@ function SimpleSingleSelect(_ref2) {
     disabled = false,
     empty: _empty = false,
     error = false,
-    filterHelpText = '',
     filterLabel = '',
     filterPlaceholder: _filterPlaceholder = '',
     filterValue = '',
@@ -104,6 +103,7 @@ function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = (0, _react.useRef)();
   const listBoxRef = (0, _react.useRef)();
+  const filterInputRef = (0, _react.useRef)();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -111,6 +111,14 @@ function SimpleSingleSelect(_ref2) {
   });
   const [selectRef, setSelectRef] = (0, _react.useState)();
   const [expanded, setExpanded] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (expanded && filterable) {
+      requestAnimationFrame(() => {
+        var _filterInputRef$curre;
+        (_filterInputRef$curre = filterInputRef.current) === null || _filterInputRef$curre === void 0 ? void 0 : _filterInputRef$curre.focus();
+      });
+    }
+  }, [expanded, filterable]);
   const closeMenu = (0, _react.useCallback)(() => setExpanded(false), []);
   const selectedValue = (selected === null || selected === void 0 ? void 0 : selected.value) || '';
   const selectedLabel = (selected === null || selected === void 0 ? void 0 : selected.label) || '';
@@ -155,7 +163,9 @@ function SimpleSingleSelect(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     clearable,
-    onClear
+    onClear,
+    filterable,
+    onFilterChange
   });
   const handleKeyDownOnFilterInput = (0, _index4.useHandleKeyPressOnFilterInput)({
     value: selectedValue,
@@ -195,6 +205,11 @@ function SimpleSingleSelect(_ref2) {
     disabled: disabled,
     error: error,
     expanded: expanded,
+    filterLabel: filterLabel,
+    filterPlaceholder: filterPlaceholder,
+    filterRef: filterInputRef,
+    filterable: filterable,
+    filterValue: filterValue,
     hasSelection: !!selectedValue,
     inputMaxHeight: inputMaxHeight,
     labelledBy: labelledBy,
@@ -208,6 +223,8 @@ function SimpleSingleSelect(_ref2) {
     onBlur: onBlur,
     onClear: onClear,
     onClick: toggleMenu,
+    onFilterChange: onFilterChange,
+    onFilterInputKeyDown: handleKeyDownOnFilterInput,
     onFocus: onFocus,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/_react.default.createElement(_index2.Menu, {
@@ -215,13 +232,8 @@ function SimpleSingleSelect(_ref2) {
     optionComponent: optionComponent,
     disabled: disabled,
     empty: empty,
-    filterHelpText: filterHelpText,
-    filterLabel: filterLabel,
-    filterable: filterable,
     filterValue: filterValue,
-    filterPlaceholder: filterPlaceholder,
     focussedOptionIndex: focussedOptionIndex,
-    onFilterInputKeyDown: handleKeyDownOnFilterInput,
     hidden: !expanded,
     name: name,
     labelledBy: labelledBy,
@@ -234,15 +246,13 @@ function SimpleSingleSelect(_ref2) {
     options: options,
     selectRef: selectRef,
     selectedValue: selectedValue,
-    tabIndex: tabIndex.toString(),
     onBlur: onBlur,
     onChange: nextValue => {
       onChange(nextValue);
       closeMenu();
     },
     onClose: closeMenu,
-    onEndReached: onEndReached,
-    onFilterChange: onFilterChange
+    onEndReached: onEndReached
   }));
 }
 SimpleSingleSelect.propTypes = {
@@ -270,8 +280,6 @@ SimpleSingleSelect.propTypes = {
   empty: _propTypes2.default.node,
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
   error: _uiConstants.sharedPropTypes.statusPropType,
-  /** Help text that will be displayed below the input **/
-  filterHelpText: _propTypes2.default.string,
   /** Value will be used as aria-label attribute on the filter input **/
   filterLabel: _propTypes2.default.string,
   /** Placeholder for the filter input **/

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js

@@ -10,12 +10,21 @@ var _useHandleTyping = require("./use-handle-typing.js");
 var _usePageDown = require("./use-page-down.js");
 var _usePageUp = require("./use-page-up.js");
 var _utils = require("./utils.js");
-function useSelectOption(findIndexCallback, _ref) {
+function isUnmodifiedCharacterKey(_ref) {
+  let {
+    key,
+    altKey,
+    ctrlKey,
+    metaKey
+  } = _ref;
+  return key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey;
+}
+function useSelectOption(findIndexCallback, _ref2) {
   let {
     options,
     onChange,
     value
-  } = _ref;
+  } = _ref2;
   return (0, _react.useCallback)(() => {
     const currentOptionIndex = options.findIndex(option => option.value === value);
     const nextSelectedOptionIndex = findIndexCallback({
@@ -32,7 +41,7 @@ function useSelectOption(findIndexCallback, _ref) {
     });
   }, [findIndexCallback, options, onChange, value]);
 }
-function useHandleKeyPressOnCombobox(_ref2) {
+function useHandleKeyPressOnCombobox(_ref3) {
   let {
     value,
     disabled,
@@ -47,8 +56,10 @@ function useHandleKeyPressOnCombobox(_ref2) {
     selectFocussedOption,
     onChange,
     clearable,
-    onClear
-  } = _ref2;
+    onClear,
+    filterable,
+    onFilterChange
+  } = _ref3;
   const {
     onTyping,
     typing
@@ -103,9 +114,7 @@ function useHandleKeyPressOnCombobox(_ref2) {
   const handleKeyPress = (0, _react.useCallback)(event => {
     const {
       key,
-      altKey,
-      ctrlKey,
-      metaKey
+      altKey
     } = event;
     if (disabled || loading) {
       return;
@@ -170,7 +179,12 @@ function useHandleKeyPressOnCombobox(_ref2) {
       focusLastOption();
       return;
     }
-    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey || key === ' ' && typing) {
+    if (filterable && !expanded && isUnmodifiedCharacterKey(event)) {
+      openMenu();
+      onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(key);
+      return;
+    }
+    if (key === 'Backspace' || key === 'Clear' || isUnmodifiedCharacterKey(event) || key === ' ' && typing) {
       onTyping(key);
       return;
     }
@@ -184,6 +198,6 @@ function useHandleKeyPressOnCombobox(_ref2) {
     }
 
     // Do nothing
-  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping]);
+  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping, filterable, onFilterChange]);
   return handleKeyPress;
 }

package/build/cjs/simple-single-select-field/simple-single-select-field.js

@@ -13,6 +13,7 @@ var _index = require("../simple-single-select/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function SimpleSingleSelectField(props) {
+  var _ref, _selectedOption$label;
   const {
     className,
     dataTest,
@@ -21,12 +22,28 @@ function SimpleSingleSelectField(props) {
     helpText,
     label,
     name,
+    onChange,
+    options,
     required,
     valid,
     validationText,
+    value,
+    valueLabel,
     warning
   } = props;
   const labelId = `${name}-label`;
+  const selectedOption = options.find(opt => opt.value === value);
+  const selected = value != null && value !== '' ? {
+    value,
+    label: (_ref = (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : valueLabel) !== null && _ref !== void 0 ? _ref : ''
+  } : undefined;
+  const handleChange = option => {
+    var _option$value;
+    onChange((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : '');
+  };
+  const handleClear = () => {
+    onChange('');
+  };
   return /*#__PURE__*/_react.default.createElement(_field.Field, {
     className: className,
     dataTest: dataTest,
@@ -40,7 +57,10 @@ function SimpleSingleSelectField(props) {
     warning: warning,
     valid: valid
   }, /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelect, _extends({}, props, {
-    labelledBy: labelId
+    labelledBy: labelId,
+    selected: selected,
+    onChange: handleChange,
+    onClear: handleClear
   })));
 }
 SimpleSingleSelectField.propTypes = {
@@ -115,10 +135,10 @@ SimpleSingleSelectField.propTypes = {
    * be used to supply the text to be shown.
    **/
   valueLabel: (0, _propTypes.requiredIf)(props => {
-    if (props.options.find(_ref => {
+    if (props.options.find(_ref2 => {
       let {
         value
-      } = _ref;
+      } = _ref2;
       return props.value === value;
     })) {
       return false;

package/build/cjs/simple-single-select-field/simple-single-select-field.test.js

@@ -26,7 +26,7 @@ describe('<SimpleSingleSelectField />', () => {
   it('should forward props to the SimpleSingleSelect component', () => {
     const options = [];
     const optionComponent = () => null;
-    const onChange = () => null;
+    const onChange = jest.fn();
     const onBlur = () => null;
     const onEndReached = () => null;
     const onFilterChange = () => null;
@@ -70,7 +70,10 @@ describe('<SimpleSingleSelectField />', () => {
     }));
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].name).toBe('foo');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].options).toBe(options);
-    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onChange).toBe(onChange);
+    _simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onChange({
+      value: 'test'
+    });
+    expect(onChange).toHaveBeenCalledWith('test');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].autoFocus).toBe(false);
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].className).toBe('');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].clearText).toBe('');

package/build/es/simple-single-select/menu/filter.js

@@ -1,6 +1,4 @@
 import _JSXStyle from "styled-jsx/style";
-import { colors, spacers } from '@dhis2/ui-constants';
-import { Input } from '@dhis2-ui/input';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../../locales/index.js';
@@ -8,46 +6,41 @@ export function Filter(_ref) {
   let {
     ariaControls,
     dataTest,
+    inputRef,
     label,
     placeholder,
-    tabIndex,
     value,
     onChange,
     onKeyDown
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3850436710", [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]]])
-  }, /*#__PURE__*/React.createElement(Input, {
-    dense: true,
-    tabIndex: tabIndex,
-    ariaControls: ariaControls,
-    ariaHaspopup: "listbox",
-    ariaLabel: label || i18n.t('Search options'),
-    dataTest: `${dataTest}-input`,
-    value: value,
-    onChange: _ref2 => {
-      let {
-        value
-      } = _ref2;
-      return onChange(value);
-    },
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
     type: "text",
     name: "filter",
+    value: value,
     placeholder: placeholder,
-    onKeyDown: (_, e) => onKeyDown(e)
+    "aria-label": label || i18n.t('Search options'),
+    "aria-controls": ariaControls,
+    "aria-haspopup": "listbox",
+    "data-test": dataTest,
+    onChange: e => onChange(e.target.value),
+    onClick: e => e.stopPropagation(),
+    onKeyDown: e => {
+      e.stopPropagation();
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    },
+    className: "jsx-1122123784" + " " + "filter-input"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3850436710",
-    dynamic: [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]
-  }, [`div.__jsx-style-dynamic-selector{height:100%;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${colors.white};}`]));
+    id: "1122123784"
+  }, [".filter-input.jsx-1122123784{-webkit-flex:1;-ms-flex:1;flex:1;border:none;outline:none;background:transparent;font-size:14px;line-height:16px;color:inherit;padding:0;min-width:0;}"]));
 }
 Filter.propTypes = {
   ariaControls: PropTypes.string.isRequired,
+  inputRef: PropTypes.object.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   label: PropTypes.string,
   placeholder: PropTypes.string,
-  tabIndex: PropTypes.string,
   onKeyDown: PropTypes.func
 };

package/build/es/simple-single-select/menu/menu.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { optionProp } from '../shared-prop-types.js';
 import { Empty } from './empty.js';
-import { Filter } from './filter.js';
 import { Loading } from './loading.js';
 import { NoMatch } from './no-match.js';
 import { OptionsList } from './options-list.js';
@@ -21,10 +20,7 @@ export function Menu(_ref) {
     dataTest,
     disabled,
     empty,
-    filterLabel,
-    filterPlaceholder,
     filterValue,
-    filterable,
     hidden,
     labelledBy,
     listBoxRef,
@@ -35,12 +31,9 @@ export function Menu(_ref) {
     optionUpdateStrategy,
     selectRef,
     selectedValue,
-    tabIndex,
     onBlur,
     onClose,
-    onEndReached,
-    onFilterChange,
-    onFilterInputKeyDown
+    onEndReached
   } = _ref;
   const [menuWidth, setWidth] = useState('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -74,18 +67,7 @@ export function Menu(_ref) {
       maxHeight
     },
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "menu"
-  }, filterable && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "filter-container"
-  }, /*#__PURE__*/React.createElement(Filter, {
-    dataTest: `${dataTestPrefix}-filter`,
-    value: filterValue,
-    label: filterLabel,
-    ariaControls: `${name}-listbox`,
-    placeholder: filterPlaceholder,
-    tabIndex: tabIndex,
-    onChange: onFilterChange,
-    onKeyDown: onFilterInputKeyDown
-  })), isEmpty && /*#__PURE__*/React.createElement(Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/React.createElement(NoMatch, null, noMatchText), /*#__PURE__*/React.createElement("div", {
+  }, isEmpty && /*#__PURE__*/React.createElement(Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/React.createElement(NoMatch, null, noMatchText), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "listbox-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "listbox-wrapper"
@@ -126,10 +108,7 @@ Menu.propTypes = {
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,
   empty: PropTypes.node,
-  filterLabel: PropTypes.string,
-  filterPlaceholder: PropTypes.string,
   filterValue: PropTypes.string,
-  filterable: PropTypes.bool,
   hidden: PropTypes.bool,
   labelledBy: PropTypes.string,
   loading: PropTypes.bool,
@@ -140,10 +119,7 @@ Menu.propTypes = {
   optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
   selectRef: PropTypes.instanceOf(HTMLElement),
   selectedValue: PropTypes.string,
-  tabIndex: PropTypes.string,
   onBlur: PropTypes.func,
   onClose: PropTypes.func,
-  onEndReached: PropTypes.func,
-  onFilterChange: PropTypes.func,
-  onFilterInputKeyDown: PropTypes.func
+  onEndReached: PropTypes.func
 };

package/build/es/simple-single-select/selected-value/selected-value.js

@@ -2,6 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { IconChevronDown16 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Filter } from '../menu/filter.js';
 import { ClearButton } from './clear-button.js';
 import { Container } from './container.js';
 import { Placeholder } from './placeholder.js';
@@ -21,6 +22,11 @@ export function SelectedValue(_ref) {
     disabled,
     error,
     expanded,
+    filterLabel,
+    filterPlaceholder,
+    filterRef,
+    filterable,
+    filterValue,
     hasSelection,
     inputMaxHeight,
     labelledBy,
@@ -32,9 +38,12 @@ export function SelectedValue(_ref) {
     onBlur,
     onClear,
     onClick,
+    onFilterChange,
+    onFilterInputKeyDown,
     onFocus
   } = _ref;
   const dataTestPrefix = `${dataTest}-selectedvalue`;
+  const showFilter = filterable && expanded;
   return /*#__PURE__*/React.createElement(Container, {
     dataTest: `${dataTestPrefix}-container`,
     ref: comboBoxRef,
@@ -57,7 +66,16 @@ export function SelectedValue(_ref) {
   }, prefix && /*#__PURE__*/React.createElement(Prefix, {
     dataTest: `${dataTestPrefix}-prefix`,
     prefix: prefix
-  }), /*#__PURE__*/React.createElement("div", {
+  }), showFilter ? /*#__PURE__*/React.createElement(Filter, {
+    inputRef: filterRef,
+    ariaControls: `${name}-listbox`,
+    dataTest: `${dataTestPrefix}-filter`,
+    label: filterLabel,
+    placeholder: filterPlaceholder,
+    value: filterValue,
+    onChange: onFilterChange,
+    onKeyDown: onFilterInputKeyDown
+  }) : /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: _JSXStyle.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "selected-option-label"
   }, !selectedLabel && !prefix && placeholder && /*#__PURE__*/React.createElement(Placeholder, {
@@ -84,6 +102,7 @@ export function SelectedValue(_ref) {
 SelectedValue.propTypes = {
   clearText: PropTypes.string.isRequired,
   comboBoxId: PropTypes.string.isRequired,
+  filterRef: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   selectedLabel: PropTypes.string.isRequired,
   onKeyDown: PropTypes.func.isRequired,
@@ -97,6 +116,10 @@ SelectedValue.propTypes = {
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   expanded: PropTypes.bool,
+  filterLabel: PropTypes.string,
+  filterPlaceholder: PropTypes.string,
+  filterValue: PropTypes.string,
+  filterable: PropTypes.bool,
   hasSelection: PropTypes.bool,
   inputMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   labelledBy: PropTypes.string,
@@ -108,5 +131,7 @@ SelectedValue.propTypes = {
   onBlur: PropTypes.func,
   onClear: PropTypes.func,
   onClick: PropTypes.func,
+  onFilterChange: PropTypes.func,
+  onFilterInputKeyDown: PropTypes.func,
   onFocus: PropTypes.func
 };

package/build/es/simple-single-select/simple-single-select.js

@@ -58,7 +58,6 @@ export function SimpleSingleSelect(_ref2) {
     disabled = false,
     empty: _empty = false,
     error = false,
-    filterHelpText = '',
     filterLabel = '',
     filterPlaceholder: _filterPlaceholder = '',
     filterValue = '',
@@ -95,6 +94,7 @@ export function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = useRef();
   const listBoxRef = useRef();
+  const filterInputRef = useRef();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -102,6 +102,14 @@ export function SimpleSingleSelect(_ref2) {
   });
   const [selectRef, setSelectRef] = useState();
   const [expanded, setExpanded] = useState(false);
+  useEffect(() => {
+    if (expanded && filterable) {
+      requestAnimationFrame(() => {
+        var _filterInputRef$curre;
+        (_filterInputRef$curre = filterInputRef.current) === null || _filterInputRef$curre === void 0 ? void 0 : _filterInputRef$curre.focus();
+      });
+    }
+  }, [expanded, filterable]);
   const closeMenu = useCallback(() => setExpanded(false), []);
   const selectedValue = (selected === null || selected === void 0 ? void 0 : selected.value) || '';
   const selectedLabel = (selected === null || selected === void 0 ? void 0 : selected.label) || '';
@@ -146,7 +154,9 @@ export function SimpleSingleSelect(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     clearable,
-    onClear
+    onClear,
+    filterable,
+    onFilterChange
   });
   const handleKeyDownOnFilterInput = useHandleKeyPressOnFilterInput({
     value: selectedValue,
@@ -186,6 +196,11 @@ export function SimpleSingleSelect(_ref2) {
     disabled: disabled,
     error: error,
     expanded: expanded,
+    filterLabel: filterLabel,
+    filterPlaceholder: filterPlaceholder,
+    filterRef: filterInputRef,
+    filterable: filterable,
+    filterValue: filterValue,
     hasSelection: !!selectedValue,
     inputMaxHeight: inputMaxHeight,
     labelledBy: labelledBy,
@@ -199,6 +214,8 @@ export function SimpleSingleSelect(_ref2) {
     onBlur: onBlur,
     onClear: onClear,
     onClick: toggleMenu,
+    onFilterChange: onFilterChange,
+    onFilterInputKeyDown: handleKeyDownOnFilterInput,
     onFocus: onFocus,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React.createElement(Menu, {
@@ -206,13 +223,8 @@ export function SimpleSingleSelect(_ref2) {
     optionComponent: optionComponent,
     disabled: disabled,
     empty: empty,
-    filterHelpText: filterHelpText,
-    filterLabel: filterLabel,
-    filterable: filterable,
     filterValue: filterValue,
-    filterPlaceholder: filterPlaceholder,
     focussedOptionIndex: focussedOptionIndex,
-    onFilterInputKeyDown: handleKeyDownOnFilterInput,
     hidden: !expanded,
     name: name,
     labelledBy: labelledBy,
@@ -225,15 +237,13 @@ export function SimpleSingleSelect(_ref2) {
     options: options,
     selectRef: selectRef,
     selectedValue: selectedValue,
-    tabIndex: tabIndex.toString(),
     onBlur: onBlur,
     onChange: nextValue => {
       onChange(nextValue);
       closeMenu();
     },
     onClose: closeMenu,
-    onEndReached: onEndReached,
-    onFilterChange: onFilterChange
+    onEndReached: onEndReached
   }));
 }
 SimpleSingleSelect.propTypes = {
@@ -261,8 +271,6 @@ SimpleSingleSelect.propTypes = {
   empty: PropTypes.node,
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
   error: sharedPropTypes.statusPropType,
-  /** Help text that will be displayed below the input **/
-  filterHelpText: PropTypes.string,
   /** Value will be used as aria-label attribute on the filter input **/
   filterLabel: PropTypes.string,
   /** Placeholder for the filter input **/

package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js

@@ -4,12 +4,21 @@ import { useHandleTyping } from './use-handle-typing.js';
 import { usePageDown } from './use-page-down.js';
 import { usePageUp } from './use-page-up.js';
 import { findNextOptionIndex, findPrevOptionIndex, findFirstOptionIndex, findLastOptionIndex } from './utils.js';
-function useSelectOption(findIndexCallback, _ref) {
+function isUnmodifiedCharacterKey(_ref) {
+  let {
+    key,
+    altKey,
+    ctrlKey,
+    metaKey
+  } = _ref;
+  return key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey;
+}
+function useSelectOption(findIndexCallback, _ref2) {
   let {
     options,
     onChange,
     value
-  } = _ref;
+  } = _ref2;
   return useCallback(() => {
     const currentOptionIndex = options.findIndex(option => option.value === value);
     const nextSelectedOptionIndex = findIndexCallback({
@@ -26,7 +35,7 @@ function useSelectOption(findIndexCallback, _ref) {
     });
   }, [findIndexCallback, options, onChange, value]);
 }
-export function useHandleKeyPressOnCombobox(_ref2) {
+export function useHandleKeyPressOnCombobox(_ref3) {
   let {
     value,
     disabled,
@@ -41,8 +50,10 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     selectFocussedOption,
     onChange,
     clearable,
-    onClear
-  } = _ref2;
+    onClear,
+    filterable,
+    onFilterChange
+  } = _ref3;
   const {
     onTyping,
     typing
@@ -97,9 +108,7 @@ export function useHandleKeyPressOnCombobox(_ref2) {
   const handleKeyPress = useCallback(event => {
     const {
       key,
-      altKey,
-      ctrlKey,
-      metaKey
+      altKey
     } = event;
     if (disabled || loading) {
       return;
@@ -164,7 +173,12 @@ export function useHandleKeyPressOnCombobox(_ref2) {
       focusLastOption();
       return;
     }
-    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey || key === ' ' && typing) {
+    if (filterable && !expanded && isUnmodifiedCharacterKey(event)) {
+      openMenu();
+      onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(key);
+      return;
+    }
+    if (key === 'Backspace' || key === 'Clear' || isUnmodifiedCharacterKey(event) || key === ' ' && typing) {
       onTyping(key);
       return;
     }
@@ -178,6 +192,6 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     }
 
     // Do nothing
-  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping]);
+  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping, filterable, onFilterChange]);
   return handleKeyPress;
 }

package/build/es/simple-single-select-field/simple-single-select-field.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { SimpleSingleSelect, optionProp } from '../simple-single-select/index.js';
 export function SimpleSingleSelectField(props) {
+  var _ref, _selectedOption$label;
   const {
     className,
     dataTest,
@@ -14,12 +15,28 @@ export function SimpleSingleSelectField(props) {
     helpText,
     label,
     name,
+    onChange,
+    options,
     required,
     valid,
     validationText,
+    value,
+    valueLabel,
     warning
   } = props;
   const labelId = `${name}-label`;
+  const selectedOption = options.find(opt => opt.value === value);
+  const selected = value != null && value !== '' ? {
+    value,
+    label: (_ref = (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : valueLabel) !== null && _ref !== void 0 ? _ref : ''
+  } : undefined;
+  const handleChange = option => {
+    var _option$value;
+    onChange((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : '');
+  };
+  const handleClear = () => {
+    onChange('');
+  };
   return /*#__PURE__*/React.createElement(Field, {
     className: className,
     dataTest: dataTest,
@@ -33,7 +50,10 @@ export function SimpleSingleSelectField(props) {
     warning: warning,
     valid: valid
   }, /*#__PURE__*/React.createElement(SimpleSingleSelect, _extends({}, props, {
-    labelledBy: labelId
+    labelledBy: labelId,
+    selected: selected,
+    onChange: handleChange,
+    onClear: handleClear
   })));
 }
 SimpleSingleSelectField.propTypes = {
@@ -108,10 +128,10 @@ SimpleSingleSelectField.propTypes = {
    * be used to supply the text to be shown.
    **/
   valueLabel: requiredIf(props => {
-    if (props.options.find(_ref => {
+    if (props.options.find(_ref2 => {
       let {
         value
-      } = _ref;
+      } = _ref2;
       return props.value === value;
     })) {
       return false;

package/build/es/simple-single-select-field/simple-single-select-field.test.js

@@ -23,7 +23,7 @@ describe('<SimpleSingleSelectField />', () => {
   it('should forward props to the SimpleSingleSelect component', () => {
     const options = [];
     const optionComponent = () => null;
-    const onChange = () => null;
+    const onChange = jest.fn();
     const onBlur = () => null;
     const onEndReached = () => null;
     const onFilterChange = () => null;
@@ -67,7 +67,10 @@ describe('<SimpleSingleSelectField />', () => {
     }));
     expect(SimpleSingleSelect.mock.calls[0][0].name).toBe('foo');
     expect(SimpleSingleSelect.mock.calls[0][0].options).toBe(options);
-    expect(SimpleSingleSelect.mock.calls[0][0].onChange).toBe(onChange);
+    SimpleSingleSelect.mock.calls[0][0].onChange({
+      value: 'test'
+    });
+    expect(onChange).toHaveBeenCalledWith('test');
     expect(SimpleSingleSelect.mock.calls[0][0].autoFocus).toBe(false);
     expect(SimpleSingleSelect.mock.calls[0][0].className).toBe('');
     expect(SimpleSingleSelect.mock.calls[0][0].clearText).toBe('');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.12.9",
+    "version": "10.12.11",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.12.9",
-        "@dhis2-ui/button": "10.12.9",
-        "@dhis2-ui/card": "10.12.9",
-        "@dhis2-ui/checkbox": "10.12.9",
-        "@dhis2-ui/chip": "10.12.9",
-        "@dhis2-ui/field": "10.12.9",
-        "@dhis2-ui/input": "10.12.9",
-        "@dhis2-ui/layer": "10.12.9",
-        "@dhis2-ui/loader": "10.12.9",
-        "@dhis2-ui/popper": "10.12.9",
-        "@dhis2-ui/status-icon": "10.12.9",
-        "@dhis2-ui/tooltip": "10.12.9",
+        "@dhis2-ui/box": "10.12.11",
+        "@dhis2-ui/button": "10.12.11",
+        "@dhis2-ui/card": "10.12.11",
+        "@dhis2-ui/checkbox": "10.12.11",
+        "@dhis2-ui/chip": "10.12.11",
+        "@dhis2-ui/field": "10.12.11",
+        "@dhis2-ui/input": "10.12.11",
+        "@dhis2-ui/layer": "10.12.11",
+        "@dhis2-ui/loader": "10.12.11",
+        "@dhis2-ui/popper": "10.12.11",
+        "@dhis2-ui/status-icon": "10.12.11",
+        "@dhis2-ui/tooltip": "10.12.11",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.12.9",
-        "@dhis2/ui-icons": "10.12.9",
+        "@dhis2/ui-constants": "10.12.11",
+        "@dhis2/ui-icons": "10.12.11",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },