Merge pull request #34316 from Fischer-L/bug_1270392-disable-don-btn-…

…if-no-card-selected

Bug 1270392 - [TV][Home] In card selection page of creating folder, the Done button always enabled, r=luke

tv_apps/smart-home/js/card_picker.js

@@ -29,7 +29,8 @@
 
       this.container.addEventListener('click', this.focus.bind(this));
 
-      this._spatialNavigator = new SpatialNavigator(this.navigableElements);
+      this._spatialNavigator = new SpatialNavigator(
+        this.navigableElements, { ignoreHiddenElement: true });
       this._spatialNavigator.on('focus', this.onFocus.bind(this));
       this._spatialNavigator.focus();
 
@@ -55,7 +56,7 @@
     },
 
     openKeyboard: function () {
-      this.panel.classList.add('hidden');
+      this._hidePanel();
       // Set readOnly to false and blur then focus input
       // to trigger keyboard opening
       this.input.readOnly = false;
@@ -71,7 +72,7 @@
     },
 
     closeKeyboard: function () {
-      this.panel.classList.remove('hidden');
+      this._showPanel();
       // Set readOnly to true and blur then focus input
       // to trigger keyboard closing
       this.input.readOnly = true;
@@ -123,6 +124,12 @@
         this.updateCapacityCount();
         if (this.mode == 'update') {
           this._showButton(this.selected.length ? 'done' : 'remove');
+        } else if (this.mode == 'add') {
+          if (this.selected.length) {
+            this._showPanel();
+          } else {
+            this._hidePanel();
+          }
         }
       } else if (elem === this.input) {
         if (this.isKeyboardOpened) {
@@ -177,6 +184,10 @@
       this.mode = folderElem ? 'update' : 'add';
       this._folder = null;
       this._showButton('done');
+      if (this.mode == 'add') {
+        // Hide the panel first since no card is selected
+        this._hidePanel();
+      }
       this.refresh(folderElem);
       this.container.classList.remove('hidden');
       this.focus();
@@ -295,6 +306,17 @@
       }
     },
 
+    _showPanel: function () {
+      if (this.mode == 'add' && this.selected.length <= 0) {
+        return;
+      }
+      this.panel.classList.remove('hidden');
+    },
+
+    _hidePanel: function () {
+      this.panel.classList.add('hidden');
+    },
+
     /**
      * Functions for adding and updating to databases
      */

tv_apps/smart-home/style/card-picker.css

@@ -148,10 +148,14 @@
   padding-top: 2.6rem;
   background: RGBA(0, 0, 0, 0.9);
   text-align: center;
+  opacity: 1;
+  visibility: visible;
+  transition: all 0.5s ease;
 }
 
 .card-picker-panel.hidden {
-  display: none;
+  opacity: 0;
+  visibility: hidden;
 }
 
 .card-picker-panel smart-button.hidden {