@rhc-shared-components/form-multi-select-component 1.0.1 → 1.0.3

package/dist/FormMultiSelectInput.d.ts

@@ -9,11 +9,12 @@ export interface FormMultiSelectInputProps {
     selectMenuOptions: IMultiSelectInputOptionProps[];
     ariaLabel?: string;
     helperText?: string;
-    maxHeight?: string | number;
+    maxHeight?: string;
     isDisabled?: boolean;
     classNames?: string;
     menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
     extraProps?: any;
+    isScrollable?: boolean;
 }
 declare const FormMultiSelectInput: React.FunctionComponent<FormMultiSelectInputProps>;
 export { FormMultiSelectInput, IMultiSelectInputOptionProps };

package/dist/index.js

@@ -111,7 +111,7 @@ const TimesIcon = createIcon(TimesIconConfig);
 
 var TimesIcon$1 = TimesIcon;
 
-var _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
+var _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps", "isScrollable"];
 
 var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var label = _ref.label,
@@ -119,6 +119,7 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       selectMenuOptions = _ref.selectMenuOptions,
       placeholder = _ref.placeholder,
       helperText = _ref.helperText,
+      maxHeight = _ref.maxHeight,
       isDisabled = _ref.isDisabled,
       menuAppendTo = _ref.menuAppendTo,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -181,9 +182,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     }
 
     setSelectOptions(newSelectOptions);
-    setFocusedItemIndex(null);
     setActiveItem(null);
-  }, [inputValue]);
+  }, [inputValue, selectMenuOptions]);
   React__default["default"].useEffect(function () {
     if ((value == null ? void 0 : value.length) > 0) {
       setFieldValue(rest.name, value, true);
@@ -236,6 +236,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
             return !prevIsOpen;
           });
         } else if (isOpen && focusedItem.value !== 'no results') {
+          event.preventDefault();
+
           _onSelect(focusedItem.value);
         }
 
@@ -261,6 +263,7 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
 
   var onTextInputChange = function onTextInputChange(_event, value) {
     setInputValue(value);
+    setFocusedItemIndex(null);
   };
 
   var _onSelect = function onSelect(value) {
@@ -327,6 +330,7 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
         setSelected([]); // eslint-disable-next-line no-unused-expressions
 
         textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
+        setFieldValue(rest.name, [], true);
       },
       "aria-label": 'Clear input value'
     }, React__default["default"].createElement(TimesIcon$1, {
@@ -351,13 +355,15 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     onOpenChange: function onOpenChange() {
       return setIsOpen(false);
     },
-    toggle: toggle
+    toggle: toggle,
+    isScrollable: true,
+    maxMenuHeight: maxHeight
   }, menuAppendTo && {
     menuAppendTo: menuAppendTo
   }), React__default["default"].createElement(reactCore.SelectList, {
     isAriaMultiselectable: true,
     id: 'select-multi-typeahead-listbox'
-  }, selectOptions.map(function (option, index) {
+  }, selectOptions == null ? void 0 : selectOptions.map(function (option, index) {
     return React__default["default"].createElement(reactCore.SelectOption, Object.assign({
       key: option.value || option.children,
       isFocused: focusedItemIndex === index,

package/dist/index.modern.js

@@ -89,7 +89,7 @@ const TimesIcon = createIcon(TimesIconConfig);
 
 var TimesIcon$1 = TimesIcon;
 
-const _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
+const _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps", "isScrollable"];
 
 const FormMultiSelectInput = _ref => {
   let {
@@ -99,6 +99,7 @@ const FormMultiSelectInput = _ref => {
     ariaLabel = 'Select Input',
     placeholder,
     helperText,
+    maxHeight,
     isDisabled,
     menuAppendTo
   } = _ref,
@@ -141,9 +142,8 @@ const FormMultiSelectInput = _ref => {
     }
 
     setSelectOptions(newSelectOptions);
-    setFocusedItemIndex(null);
     setActiveItem(null);
-  }, [inputValue]);
+  }, [inputValue, selectMenuOptions]);
   React__default.useEffect(() => {
     if ((value == null ? void 0 : value.length) > 0) {
       setFieldValue(rest.name, value, true);
@@ -190,6 +190,7 @@ const FormMultiSelectInput = _ref => {
         if (!isOpen) {
           setIsOpen(prevIsOpen => !prevIsOpen);
         } else if (isOpen && focusedItem.value !== 'no results') {
+          event.preventDefault();
           onSelect(focusedItem.value);
         }
 
@@ -215,6 +216,7 @@ const FormMultiSelectInput = _ref => {
 
   const onTextInputChange = (_event, value) => {
     setInputValue(value);
+    setFocusedItemIndex(null);
   };
 
   const onSelect = value => {
@@ -275,6 +277,7 @@ const FormMultiSelectInput = _ref => {
       setSelected([]); // eslint-disable-next-line no-unused-expressions
 
       textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
+      setFieldValue(rest.name, [], true);
     },
     "aria-label": 'Clear input value'
   }, React__default.createElement(TimesIcon$1, {
@@ -294,13 +297,15 @@ const FormMultiSelectInput = _ref => {
     selected: selected,
     onSelect: (_ev, selection) => onSelect(selection),
     onOpenChange: () => setIsOpen(false),
-    toggle: toggle
+    toggle: toggle,
+    isScrollable: true,
+    maxMenuHeight: maxHeight
   }, menuAppendTo && {
     menuAppendTo
   }), React__default.createElement(SelectList, {
     isAriaMultiselectable: true,
     id: 'select-multi-typeahead-listbox'
-  }, selectOptions.map((option, index) => React__default.createElement(SelectOption, Object.assign({
+  }, selectOptions == null ? void 0 : selectOptions.map((option, index) => React__default.createElement(SelectOption, Object.assign({
     key: option.value || option.children,
     isFocused: focusedItemIndex === index,
     id: `select-multi-typeahead-${option.value.replace(' ', '-')}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@patternfly/react-core": "5.3.0",
-    "@rhc-shared-components/form-group-container": "^0.4.0",
+    "@rhc-shared-components/form-group-container": "^1.0.1",
     "@types/lodash": "^4.14.177",
     "formik": "^2.1.4",
     "lodash": "^4.17.21",