How to create an external "Formula Bar" input linked to the selected cell?

Getting help Questions
,
1

I’m trying to create a single “formula bar” <input> that sits outside my Handsontable grid, just like in Excel.

My goal is a two-way data binding:

  1. Grid-to-Input: When a user clicks a cell, its data loads into the external <input>.
  2. Input-to-Grid: When a user types in the external <input>, it edits the currently selected cell in real-time.

What I’ve tried so far:

I’ve gotten part-way there:

  • I’m using the afterSelection hook to get the cell’s data and display it in my <input>.
  • I’m using an input event listener on my text box to call setDataAtCell on the selected cell.

My Problem:

This almost works, but I have a major focus issue:

When a user clicks a cell, it’s selected and the input bar is updated (Good!). But as soon as the user clicks into the external input bar to start typing, the Handsontable grid loses focus.

My Question:

What is the best-practice way to build this?

example: Basic Handsontable Sheet - JSFiddle - Code Playground

2

Hi @jackson.tong

I think using the outsideClickDeselects option and setting it to false should solve your problem. Here’s an example: Basic Handsontable Sheet - JSFiddle - Code Playground

1 Like