jspreadsheet / jspreadsheet/ce

Dropdown column value becomes empty after pressing Tab (double closeEditor call reads a closed widget)

Open
#1,802 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
7.2k
Forks
890
PR merge metrics
No merged PRs in 30d

Description

Package / version: jspreadsheet-ce 5.0.4 (latest on npm at time of writing)

Steps to reproduce
  1. Create a worksheet with a column of type: 'dropdown' (see minimal reproduction below).
  2. Double-click the cell to open the dropdown editor.
  3. Pick an option (or leave the currently highlighted/default option as-is).
  4. Press Tab.

Minimal reproduction:

jspreadsheet(document.getElementById('spreadsheet'), {
  worksheets: [{
    data: [[1]],
    columns: [
      { type: 'dropdown', title: 'Status', source: [
        { id: 1, name: 'Open' },
        { id: 2, name: 'Closed' }
      ] }
    ]
  }]
});
Expected behavior

The selected value is committed to the cell, and focus moves to the next cell — standard Tab behavior.

Actual behavior

The cell value becomes empty.

Root cause (from reading the minified source, jspreadsheet.min.js)
  • On Tab while a dropdown editor is open, keyDownControls does not call closeEditor directly. Instead it calls current.edition[0].children[0].blur().
  • That blur() triggers the jSuites.dropdown widget's own close handling, which invokes the onclose callback registered in openEditor, roughly: onclose: function () { closeEditor.call(n, e, true); }.
  • closeEditor(e, true) (commit=true) for a dropdown column reads the value with r = e.children[0].dropdown.close(true); — calling .close(true) on the widget a second time, while it's already mid-close from the blur that triggered this whole chain.
  • This second .close(true) call reads from a widget instance whose internal state has already been torn down/reset by the first close, so it returns an empty value, which then gets written back to the cell.

Call chain summary:

blur()
  -> jSuites.dropdown widget's own close handling
    -> onclose callback -> closeEditor(e, true)
      -> e.children[0].dropdown.close(true)   // 2nd close call, widget already closing
        -> returns empty value -> written to cell
Related open issues (same symptom, no fix landed yet)
  • #370 — "Dropdown Value Disappears After Tabbing Then Click"
  • #1111 — "Open dropdown when down arrow is pressed and close when the tab key is pressed"
Workaround

Click another cell instead of pressing Tab after selecting a dropdown option.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the dropdown editor and keyDownControls paths in jspreadsheet.min.js, using the minimal reproduction to reproduce the Tab behavior. Trace the blur and closeEditor callbacks described in the issue, then verify that selecting or retaining an option and pressing Tab commits the value and moves focus to the next cell without making it empty.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.