Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Trying to add 'returnPressed' event for Input #230

Closed
mguijarr opened this issue Jul 8, 2018 · 2 comments · Fixed by #326
Closed

Trying to add 'returnPressed' event for Input #230

mguijarr opened this issue Jul 8, 2018 · 2 comments · Fixed by #326

Comments

@mguijarr
Copy link

mguijarr commented Jul 8, 2018

(this is a follow-up of the issue I added on dash project, I was not sure where to put it)

I tried to implement the feature I asked for, here is the diff on Input component:

.react.js`
diff --git a/src/components/Input.react.js b/src/components/Input.react.js
index b064581..860a4ce 100644
--- a/src/components/Input.react.js
+++ b/src/components/Input.react.js
@@ -43,6 +43,11 @@ export default class Input extends Component {
                 onBlur={() => {
                     if (fireEvent) fireEvent({event: 'blur'});
                 }}
+                onKeyPress={e => {
+                    if (e.charCode === 13) {
+                        if (fireEvent) fireEvent({event: 'returnPressed'});
+                    }
+                }}
                 value={value}
                 {...omit(['fireEvent', 'setProps', 'value'], this.props)}
             />
@@ -254,5 +259,5 @@ Input.propTypes = {
      */
     setProps: PropTypes.func,
 
-    dashEvents: PropTypes.oneOf(['blur', 'change'])
+    dashEvents: PropTypes.oneOf(['blur', 'change', 'returnPressed'])
 };

It seems pretty straightforward, however it does not work.

Here is the code I used to give it a try:

@app.callback(dash.dependencies.Output('output', 'children'),
    [],
    [dash.dependencies.State('cmdline', 'value')],
    [dash.dependencies.Event('cmdline', 'returnPressed')])
def execute_cmd(cmd):
    return [html.Pre(cmd)]

I get error messages on the web browser console:

[Show/hide message details.] Error: Node does not exist: cmdline.change
[Show/hide message details.] Error: Node does not exist: cmdline.blur

I am new to Dash -- any help would appreciated to understand the problem, in order for me
to be able to propose a pull request (if project maintainers are interested ?)

@chriddyp
Copy link
Member

chriddyp commented Jul 9, 2018

I think that the existing Event paradigm in Dash isn't quite right, so I've stopped making patches to it and instead have relied on more stateful properties that represent events like n_clicks_timestamp.

For this particular component, I think we could make a property like n_submit, n_submit_timestamp , n_blur, n_blur_timestamp which could represent when the user pressed "enter" while the input was focused or when the input was blurred (i.e. user pressed "tab" while inside the input).

We should think about how these properties might transfer to other components as well.

@chriddyp
Copy link
Member

chriddyp commented Jul 9, 2018

Alternatively, the API could be like update_value_on='keypress' | 'enter' | 'blur'

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants