Grid CustomEditor AutoComplete fomatItem breaks key navigation

Grid CustomEditor AutoComplete fomatItem breaks key navigation

Posted by: erik.berg on 30 December 2020, 5:15 pm EST

• 

  erik.berg

  • Post Options:
  • Link
    Copy

  Posted 30 December 2020, 5:15 pm EST

  In the example Grid CustomEditor AutoComplete examplehttps://www.grapecity.com/wijmo/demos/Grid/Editing/CustomEditors/purejs, entering in the characters ut in the a Product cell brings up a listbox with items to select. The item selection can be initiated from the keyboard when the listbox is visible via the down arrow key. The behavior breaks however, when the editor has a formatItem defined; the listbox goes away, focus is set to an empty cell.

  1. How can the default AutoComplete behavior key navigation be restored when when using a custom formatItem?

  2. If an item is selected in the listbox, the Enter key will change the cell the value to that of the selected listbox item. Is there a way to extend the AutoComplete behavior, such that the Enter key selects the first item from the visible listbox when no items in the listbox are selected.

  Existing Behavior
  
  Typing ut displays the following options:

  • "* “CornNuts”

  • “KP Nuts”

  • “Nobby’s Nuts”
    
    "

  Pressing the down arrow key selects CornNuts in the listbox.

  Pressing the Enter key, then triggers CornNuts to be the cell’s selected value.

  Desired Extended Behavior
  
  Typing ut displays the following options:

  • "* “CornNuts”

  • “KP Nuts”

  • “Nobby’s Nuts”
    
    "

  Pressing the Enterkey, then triggers CornNuts to be the cell’s selected value.

• 

  erik.berg

  • Post Options:
  • Link
    Copy

  Posted 30 December 2020, 5:37 pm EST

  Note the formatItem Naviagtion Item might be wijmo version specific as the behavior is not reproducing with a simple formatItem:

  formatItem: (s,e) => { e.item.innerHTML = `<table><tr><td>${e.data.id}</td><td>${e.data.name}</td></tr></table>` }
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 January 2021, 9:08 am EST

  Hi,

  Regarding the down key
  
  We are sorry but we are unable to replicate the issue at our end. In our test, the down key correctly changes the selected item in the dropdown even after using the formatItem. Please refer to the sample shared below.

  Regarding selecting first item by default
  
  You may handle the isDroppedDownChanged event and set the selectedItem when drop down is closed. Please refer to the following sample which demonstrates the same:
  
  https://codesandbox.io/s/wijmo-starter-forked-fe4s2?file=/src/index.js

  Regards