@lanaco/lnc-react-ui 2.1.3 → 2.1.4

package/lib/index.esm.js

@@ -53346,7 +53346,7 @@ var iconPaddingBySize = function iconPaddingBySize(size) {
 };
 
 var containerColor = function containerColor(props) {
-  if (props.disable) return props.theme.palette.gray[200];
+  if (props.disabled) return props.theme.palette.gray[200];
   if (props.focus) return "white";
   return props.theme.palette[props.color].lighter;
 };
@@ -53458,18 +53458,33 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
   };
 
   var onKeyDown = function onKeyDown(e) {
-    if (e.keyCode === 27) InputRef.current.blur();
-    if (e.keyCode === 38 || e.keyCode === 40) e.preventDefault();
-    if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
-    if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
+    //ArrowUp & ArrowDown
+    if (e.keyCode === 38 || e.keyCode === 40) e.preventDefault(); //Esc
+
+    if (e.keyCode === 27) InputRef.current.blur(); //ArrowUp & ArrowDown
+
+    if (options !== null && options.length !== 0 && inFocus) {
+      if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
+      if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
+      if (e.keyCode === 13) optionSelected([].concat(_toConsumableArray(items), [options[cursor]]));
 
-    if (e.key === "Enter" && options.length > 0 && value && value.length > 0) {
-      optionSelected([].concat(_toConsumableArray(items), [options[cursor]]));
+      if (e.key === "Backspace" && items.length > 0 && value === "") {
+        handleRemoveItem(items.length - 1);
+      }
+
+      console.log("ARR DOWN");
+      return;
+    }
+
+    if (e.keyCode === 40) {
+      setInFocus(true);
+      setCursor(0);
+      load(e.target.value);
     }
 
     var empty = options === null || options !== null && options.length === 0;
 
-    if (e.key === "Enter" && inFocus && empty && loading === false && value !== "") {
+    if (e.key === "Enter" && inFocus && empty && loading === false) {
       onInputBlur();
     }
 
@@ -53528,7 +53543,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
 
     var empty = options === null || options !== null && options.length === 0;
 
-    if (inFocus && empty && loading === false && value !== "") {
+    if (inFocus && empty && loading === false) {
       return /*#__PURE__*/React__default.createElement(FadeIn, null, /*#__PURE__*/React__default.createElement(Content, _extends({}, themeProps, {
         key: 0
       }), /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {

package/lib/index.js

@@ -53387,7 +53387,7 @@ var iconPaddingBySize = function iconPaddingBySize(size) {
 };
 
 var containerColor = function containerColor(props) {
-  if (props.disable) return props.theme.palette.gray[200];
+  if (props.disabled) return props.theme.palette.gray[200];
   if (props.focus) return "white";
   return props.theme.palette[props.color].lighter;
 };
@@ -53499,18 +53499,33 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
   };
 
   var onKeyDown = function onKeyDown(e) {
-    if (e.keyCode === 27) InputRef.current.blur();
-    if (e.keyCode === 38 || e.keyCode === 40) e.preventDefault();
-    if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
-    if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
+    //ArrowUp & ArrowDown
+    if (e.keyCode === 38 || e.keyCode === 40) e.preventDefault(); //Esc
+
+    if (e.keyCode === 27) InputRef.current.blur(); //ArrowUp & ArrowDown
+
+    if (options !== null && options.length !== 0 && inFocus) {
+      if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
+      if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
+      if (e.keyCode === 13) optionSelected([].concat(_toConsumableArray__default['default'](items), [options[cursor]]));
 
-    if (e.key === "Enter" && options.length > 0 && value && value.length > 0) {
-      optionSelected([].concat(_toConsumableArray__default['default'](items), [options[cursor]]));
+      if (e.key === "Backspace" && items.length > 0 && value === "") {
+        handleRemoveItem(items.length - 1);
+      }
+
+      console.log("ARR DOWN");
+      return;
+    }
+
+    if (e.keyCode === 40) {
+      setInFocus(true);
+      setCursor(0);
+      load(e.target.value);
     }
 
     var empty = options === null || options !== null && options.length === 0;
 
-    if (e.key === "Enter" && inFocus && empty && loading === false && value !== "") {
+    if (e.key === "Enter" && inFocus && empty && loading === false) {
       onInputBlur();
     }
 
@@ -53569,7 +53584,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
 
     var empty = options === null || options !== null && options.length === 0;
 
-    if (inFocus && empty && loading === false && value !== "") {
+    if (inFocus && empty && loading === false) {
       return /*#__PURE__*/React__default['default'].createElement(FadeIn, null, /*#__PURE__*/React__default['default'].createElement(Content, _extends__default['default']({}, themeProps, {
         key: 0
       }), /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",