Loss of Focus on keypress with a grouped Inputs.search and Inputs.table control

Community Help
1

I was experimenting with grouping several inputs together using Inputs.form; however, there seems to be a focusing issue when you group together an Inputs.search() with a linked Inputs.table(). Every keypress in the search box results in a loss of focus.

Why does this happen and can this be overcome?

Right now, I have Inputs.search() in a separate cell, and that prevents the loss of focus; however, the display isn’t exactly how I would want it. If I were to uncomment the viewof search line in the below code, that shows a better display, but it has the loss of focus issue.

I also tried the approach at Input.form Template option modification and examples - #3 by ciscorucinski, and that results in the same loss of focus issue.

<div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px 30px; align-items: flex-start;">
  <div style="display: flex; flex-direction: column; flex-basis: calc(55% - 30px); flex-grow:1; gap: 20px 30px; max-width: calc(56% - 30px);">
<!--     <div>${viewof search}</div> -->
    <div>${viewof choice}</div>
    <div>${viewof modifier}</div>
  </div>
  <div style="flex-basis: calc(45% - 30px); margin-left: auto; height: 100%;">${viewof searchterm}</div>
</div>

viewof searchterm = Inputs.table(search, {
  ...
  value: search[0]
})

viewof search = Inputs.search(lineage_list, {
  ...
})
2

I’ve sent you a suggestion to retain the previous value when the incoming selection changes. It “forgets” it if the value isn’t in the new selection, and defaults back to the first item.

The “trick” is to set value: this ? this.value : "default value"

Could be shortened to value: this.?value, now that I think of it, when the default selection is the first item of the table.

3

Wow the suggested code / merge ability is amazing!

I uncommented Inputs.search() from the HTML code to inline the search box and I tried your suggestion; however, the loss of focus still occurs with every keypress.

I tried
this ? this.value : search[0] This has some auto-select issues
this ? this.value[0] : search[0] This occasionally errors
this.?value This never compiles

Also, ignoring the loss of focus for now, I am wondering if this change changes the searching behavior I had before.

Prior to this change and starting with XBB in the search box, if I had added a period, then the table would have filtered out XBB (leaving only results with XBB. in their name), and Inputs.table() would have auto selected the first item (XBB.1). If I had added a 1 to the search box, then it would have filtered out all XBB.2 and would have auto selected the first time (XBB.1). This behavior no longer seems to work using this trick.

With this trick, after adding the first period, the table doesn’t select anything. This means search term is null eventhough the search box has the text “XBB.”. Inside my Tree visualization calling code, a null search term will automatically search for “omicron”

4

Sorry I made a typo, it should have been this?.value instead. My suggestion was not about the focus, but about retaining the selection. I wouldn’t know how to address the focus issue.

1 Like