[FEATURE] Get back element focus after selection
See original GitHub issueThis request is linked to this question.
Issue: When you manually change the datatable source selection, you lost focus on the current element (or at least using InputText).
Example: Here is an example where I tried to make a search tool using an input text, and for which I have to redefined the selected rows. Whenever you make a search in which at least one selected element is found, the InputText focus is lost (after setting a new attribute to source.selected.indices
).
Adding a customJS to the same event does nothing, I guess it’s processed before the table change.
Maybe this other example is linked to the same issue.
Bokeh : 2.0.0 Python : 3.7.6 (anaconda) MacOS HiSi
from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import TextInput, DataTable, TableColumn
import pandas as pd
class SelectableDataTable() :
def __init__(self, df, select_column) :
self.df = df
self.sdf = df
self.source = ColumnDataSource(df)
self.select_column = select_column
self.ti = TextInput(name="TIName")
self.ti.on_change("value_input", self.input_callback)
columns = [TableColumn(field=column, title=column) for column in df.columns]
self.dt = DataTable(source=self.source, columns=columns, selectable="checkbox")
self.source.selected.on_change("indices", self.source_selection_change)
self.save_selection = True
self.selected = set()
code = """
document.getElementsByName(obj.name)[0].focus();
console.log('make focus');
"""
custom = CustomJS(args=dict(obj=self.ti), code=code)
self.source.selected.js_on_change("indices", custom)
def input_callback(self, attr, old, new) :
self.sdf = df[df[self.select_column].str.contains(new)]
self.source.data = self.sdf
sdf_idxs = list(self.sdf.index)
select_idx = [idx for idx, sdf_idx in enumerate(sdf_idxs) if sdf_idx in self.selected]
self.save_selection = False
self.source.selected.indices = select_idx
self.save_selection = True
def source_selection_change(self, attr, old, new) :
if not self.save_selection : return
sdf_idxs = list(self.sdf.index)
selected = {sdf_idxs[index] for index in new}
unselected = set(sdf_idxs) - selected
self.selected = (self.selected | selected) - unselected
df = pd.DataFrame({'numbers': list(range(10)), 'colors': ["red", "blue"] * 5}, columns=['numbers', 'colors'])
sdt = SelectableDataTable(df, "colors")
layout = column(sdt.ti, sdt.dt)
curdoc().add_root(layout)
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
Restoring ActiveElement Focus After A User-Interaction In ...
activeElement property to record which element triggered the modal. And then, when the user subsequently closes the modal window, we can call ....
Read more >Get "previous" element which had focus after tabbing
I would listen for the keydown and check for the tab key. then update two variables. One that stores the lastFocused key and...
Read more >Focusing: focus/blur
The focus event is called on focusing, and blur – when the element loses the focus. Let's use them for validation of an...
Read more >focus-visible - CSS: Cascading Style Sheets - MDN Web Docs
This selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).
Read more >SetFocus function in Power Apps - Power Platform
Use the SetFocus function to set the focus when (each with an example below):. a newly exposed or enabled input control, to guide...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Now I can reproduce. It’s a bizarre bug.
Suggest making the (incompatible) extension configurable behind an option at least as a short term solution.