Can I trap other events than the click event ?

[vindevoy]

My question is simple: can I trap other events like the click event ? I would like to trap the "on_enter" or "on_exit" event on a text field. If this is possible, where could I find an example ?

[gadenbuie]

Hi @vindevoy, it's certainly possible but requires writing a little bit of JavaScript. I don't think any examples exist of this specific behavior.

It'd be helpful if you could provide a simple app that motivates the example. That would make it much easier for anyone to pick up and try to help you, and it would improve the quality of answers you're likely to get. You can use https://shinylive.io/py as a place to quickly iterate on a simple example.

[wch]

@vindevoy, here is an example that you might find useful:

Shinylive link

from shiny.express import input, render, ui

ui.input_text("txt", "Type something")


ui.tags.script(
    """
const txtInput = document.querySelector("#txt");

txtInput.addEventListener("focus", () => {
   Shiny.setInputValue("txt_focus", true);
})

txtInput.addEventListener("blur", () => {
   Shiny.setInputValue("txt_focus", false);
})

// Set initial value of txt_focus when the document loads
$(document).on("shiny:sessioninitialized", () => {
    Shiny.setInputValue("txt_focus", false);
})
"""
)


@render.code
def txt_status():
    return f"Value: '{input.txt()}'\nIs focused: {str(input.txt_focus())}"

[vindevoy]

Thanks all ! I created a little screen with explanation of what I would like. This runs in Shinylive.

Note: I'm using core instead of express. Hope this is possible in core also.

from shiny import ui, Session, Outputs, Inputs, App, render


def left_sidebar():
    lst_columns = ui.input_select(id="lst_columns",
                                  label="Choices:",
                                  multiple=True,
                                  size="6",
                                  choices=["A", "B", "C", "D", "E", "F"])

    txt_explain = ("When you double click on one of the choices, the value should be copied into either X or Y, "
                   "depending on which one of X or Y I last entered/exited")

    return ui.sidebar(lst_columns,
                      txt_explain,
                      id="left_sidebar")


def center_panel():
    return ui.card(
        ui.input_text(id="txt_x", label="X:"),
        ui.input_text(id="txt_y", label="Y:"),
        ui.output_code("txt_status_x"))


def script():
    return ui.tags.script(
        """
        const txtInputX = document.querySelector("#txt_x");
        const txtInputY = document.querySelector("#txt_y");
    
        txtInputX.addEventListener("focus", () => {
           Shiny.setInputValue("txt_focus_x", true);
        })

        txtInputY.addEventListener("focus", () => {
           Shiny.setInputValue("txt_focus_y", true);
        })
    
        txtInputX.addEventListener("blur", () => {
           Shiny.setInputValue("txt_focus_x", false);
        })

        txtInputY.addEventListener("blur", () => {
           Shiny.setInputValue("txt_focus_y", false);
        })
    
        $(document).on("shiny:sessioninitialized", () => {
            Shiny.setInputValue("txt_focus_x", false);
            Shiny.setInputValue("txt_focus_y", false);
        })
        """
        )


def build_ui():
    return ui.page_fillable(
        script(),  # I don't think this should be on this location
        ui.layout_sidebar(
            left_sidebar(),
            center_panel()))


def server(inputs: Inputs, outputs: Outputs, session: Session):
    assert outputs is not None  # Linter in PyCharm
    assert session is not None  # Linter in PyCharm

    @render.code
    def txt_status_x():
        msg = f"Value of X: '{inputs.txt_x()}'\n"
        # msg += f"X Is focused: {str(inputs.txt_focus_x())}\n"
        # The line above does not work
        msg += f"Value of Y: '{inputs.txt_y()}'\n"
        # msg += f"Y Is focused: {str(inputs.txt_focus_y())}\n"
        # The line above does not work

        return msg


app_ui = build_ui()

app = App(app_ui, server)

[m-g-mostafa]

@vindevoy
I think reactive.value and @reactive.event might be the solution. I am trying to figure it out, but I didn't come to an answer yet. I think you're better than me in digging in the documentation to figure it out. If I come to an answer I'll post it here. Regards!

[m-g-mostafa]

@vindevoy ,
Here is another way for doing the job, but not as you wanted exactly:

from shiny import ui, Session, Outputs, Inputs, App, render

from shiny import reactive



def left_sidebar():
    radio_btns = ui.input_radio_buttons (id="rdo_btns",
                                label="SelectAxis (X /Y)",
                                inline=True,
                                choices=["X", "Y"])

    lst_columns = ui.input_select(id="lst_columns",
                                  label="Choices:",
                                  multiple=True,
                                  size="6",
                                  choices=["A", "B", "C", "D", "E", "F"])
    
    txt_explain = ("When you double click on one of the choices, the value should be copied into either X or Y, "
                   "depending on which one of X or Y I last entered/exited")

    return ui.sidebar(
                    radio_btns,
                    lst_columns,
                    txt_explain,
                    id="left_sidebar")


def center_panel():
    return ui.card(
        ui.input_text(id="txt_x", label="X:"),
        ui.input_text(id="txt_y", label="Y:"),
        ui.output_code("txt_status_x"))


# def script():
#     return ui.tags.script(
#         """
#         const txtInputX = document.querySelector("#txt_x");
#         const txtInputY = document.querySelector("#txt_y");
    
#         txtInputX.addEventListener("focus", () => {
#            Shiny.setInputValue("txt_focus_x", true);
#         })

#         txtInputY.addEventListener("focus", () => {
#            Shiny.setInputValue("txt_focus_y", true);
#         })
    
#         txtInputX.addEventListener("blur", () => {
#            Shiny.setInputValue("txt_focus_x", false);
#         })

#         txtInputY.addEventListener("blur", () => {
#            Shiny.setInputValue("txt_focus_y", false);
#         })
    
#         $(document).on("shiny:sessioninitialized", () => {
#             Shiny.setInputValue("txt_focus_x", false);
#             Shiny.setInputValue("txt_focus_y", false);
#         })
#         """
#         )


def build_ui():
    return ui.page_fillable(
        # script(),  # I don't think this should be on this location
        ui.layout_sidebar(
            left_sidebar(),
            center_panel()))


def server(inputs: Inputs, outputs: Outputs, session: Session):
    assert outputs is not None  # Linter in PyCharm
    assert session is not None  # Linter in PyCharm

    @render.code
    def txt_status_x():
        msg = f"Value of X: '{inputs.txt_x()}'\n"
        # msg += f"X Is focused: {str(inputs.txt_focus_x())}\n"
        # The line above does not work
        msg += f"Value of Y: '{inputs.txt_y()}'\n"
        # msg += f"Y Is focused: {str(inputs.txt_focus_y())}\n"
        # The line above does not work

        return msg
    
    @reactive.effect
    @reactive.event(inputs.rdo_btns, inputs.lst_columns, ignore_init= True)
    def _():
        selection = inputs.lst_columns()
        if inputs.rdo_btns() == 'X':
            ui.update_text(id="txt_x", value = selection)
        elif inputs.rdo_btns() == 'Y':
            ui.update_text(id="txt_y", value = selection)
            

app_ui = build_ui()

app = App(app_ui, server)