question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[FEATURE] Get back element focus after selection

See original GitHub issue

This 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:open
  • Created 3 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
mattpapcommented, Jun 30, 2021

I first check any of the checkboxes (…)

Now I can reproduce. It’s a bizarre bug.

0reactions
bryevdvcommented, Aug 11, 2021

Suggest making the (incompatible) extension configurable behind an option at least as a short term solution.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found