Open dropdown when down arrow is pressed and close when the tab key is pressed #1111

Activity

1. alfr3dosv commented on Aug 20, 2020

   

   alfr3dosv

   on Aug 20, 2020

   Last edited by alfr3dosv

   Author

   More actions

   I was able to save the data, calling close on the dropdown instead of closeEditor on the cell

       document.getElementById('spreadsheet').onkeydown = e => {
           if (e.code == 'ArrowDown') {
               let cell = document.querySelector('.jexcel_dropdown.highlight-selected');
               let instances = document.querySelectorAll('.jexcel_container');
               let currentInstance = Array.from(instances).find(c => c.style.display != 'none');
               let dropdownHasFocus = document.querySelector('.jdropdown-focus');
               if (cell && currentInstance && !dropdownHasFocus) {
                   currentInstance.jexcel.openEditor(cell);
               }
           } else if (e.code == 'Tab') {
               let cell = document.querySelector('.jexcel_dropdown.highlight-selected');
               let instances = document.querySelectorAll('.jexcel_container');
               let currentInstance = Array.from(instances).find(c => c.style.display != 'none');
               let currentDropdown = document.querySelector('.jdropdown-focus');
               if (cell && currentInstance && currentDropdown) {
                   currentDropdown.dropdown.close();
                   // prevent lost focus
                   currentInstance.focus();
               }
           }
       };
   

   JSFiddle
2. pphod commented on Aug 20, 2020

   

   pphod

   on Aug 20, 2020

   Contributor

   More actions

   Alternatively, you can create a button and call openEditor to start the edition of one specific cell.
3. alfr3dosv

   closed this as completedon Aug 20, 2020
4. whyJoe commented on Jan 7, 2021

   

   whyJoe

   on Jan 7, 2021

   More actions

   I have idea.

   onselection: function (instance, x1, y1, x2, y2, origin) {
               if (x1 == 2) {
                   var columnName = jexcel.getColumnNameFromId([x1, y1]);
                   var cell = instance.jexcel.getCell(columnName);
                   instance.jexcel.openEditor(cell);
                   cell.children[0].dropdown.close(true);
               }
           },
   

   User can open dropdown by single clicking.