@syncfusion/ej2-inputs 21.2.8 → 21.2.9

package/dist/es6/ej2-inputs.es2015.js

@@ -11414,7 +11414,7 @@ let ColorPicker = class ColorPicker extends Component {
         hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));
         const dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });
         hsvContainer.appendChild(dragHandler);
-        if (this.value === null) {
+        if (this.value === null || this.value === '') {
             this.value = '#008000ff';
         }
         this.rgb = this.hexToRgb(this.value);
@@ -12211,12 +12211,23 @@ let ColorPicker = class ColorPicker extends Component {
     }
     paletteKeyDown(e) {
         const target = e.target;
-        if (!target.classList.contains(PALETTES)) {
-            return;
-        }
         let selectedEle;
         let idx;
         const tiles = [].slice.call(selectAll('.' + TILE, target));
+        if ((target.classList.contains('e-palette') || target.classList.contains('e-tile')) && (e.keyCode === 9 && !e.shiftKey)) {
+            if (this.modeSwitcher || this.showButtons) {
+                this.getPopupEle().querySelector('.e-btn').focus();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+        else if ((target.classList.contains('e-palette') || target.classList.contains('e-tile')) && (e.keyCode === 9 && e.shiftKey)) {
+            if (this.splitBtn) {
+                this.splitBtn.element.focus();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
         const prevSelectedEle = (tiles.filter((tile) => tile.classList.contains('e-selected'))).pop();
         switch (!e.altKey && e.keyCode) {
             case 39:
@@ -12756,6 +12767,10 @@ let ColorPicker = class ColorPicker extends Component {
                     preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(newProp.value));
                 }
             }
+            else if (this.noColor && this.mode === 'Palette' && this.value === '') {
+                const preview = this.splitBtn && select('.' + SPLITPREVIEW, this.splitBtn.element);
+                preview.style.backgroundColor = '';
+            }
             else {
                 this.value = oldProp.value;
             }