https://observablehq.com/ logo
Join Slack
Powered by
This message was deleted.
# help
s
This message was deleted.
c
In the search box, try searching for 
XBB.1.5
and you will see when typing the period, the focus is lost. https://observablehq.com/@ciscorucinski/playground-sars-cov-2-phylogenetic-tree
a
I think this happens because it is embedded in the same cell as the 
searchterms
table. The 
searchterms
table source changes when you enter in the search box, and since the source changes, the entire cell re-renders, including the search box.
If the search is in a different cell from the searchterms viewof, it works fine
c
Beside placing 
Inputs.search
into a its own cell (which is what I was doing before), is there anyway to keep everything together in one cell? My end goal is to have 
Inputs.table
span the whole height of these controls and be on the side
m
Yes, but you can't use Observable's reactivity. If a cell's inputs change, it will rerun from scratch and create new DOM elements. If you control updates explicitly through something like an update method you could use https://www.npmjs.com/package/nanomorph to update the DOM without losing state
c
I will look into this option more. Thanks
f
This notebook has a helper that lets you achieve what you want while preserving Observable's reactivity: https://observablehq.com/@mootari/dashboard-with-inputs
c
I implemented the dashboard using my existing html structure and it works great!
🎉 2
Instead of returning nothing and getting an 
undefined
output, I tried to return the control and this caused the loss of focus issue again. Returning anything not related to 
search
seems to work fine, though.
Copy code
{
  display("searchbox", viewof search, invalidation);
  return search;
}
Same loss of focus with everything in one cell. I was curious if this would work, so I tried it.
Copy code
{
  display("searchbox", viewof search, invalidation);
  display("search-presets", viewof choice, invalidation);
  display("chart-modifier", viewof modifier, invalidation);
  display("search-table", viewof searchterm, invalidation);
}
Do you have any insight into why this might cause similar loss of focus issues? I guess I can kind of wrap my head around why returning a control might cause issues, but this usage I can't think anything. It seems to display everything right. Maybe this is just bad API usage and just not intended to be used like this.
f
When you return "search", you reference (and depend on) the viewof cell's .value generator. Any change to the value will invalidate the cell. Check out the examples in the dashboard notebook, and note how Generators.input() is used there.
👍 1
You might also be interested in this viewof introduction: https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us
Open in Slack
PreviousNext
Powered by