Cyberjusticelab / JusticeAI

JusticeAI (ProceZeus) is a web chat bot that aims to facilitate access to judicial proceedings involving Quebec tenant/landlord law
https://cyberjusticelab.github.io/JusticeAI/docs/rendered/
MIT License
21 stars 16 forks source link

Focus on the input fields of conversation #404

Open arekmano opened 6 years ago

arekmano commented 6 years ago

Description As a user, I would like the web interface to automatically focus on the input field.

Scope of Work

Demo requirement

  1. The user submits a response
  2. The next question shows up on the interface
  3. The response input field has focus
brucecaii commented 6 years ago

cant be done on chat interface...

  1. input textbox is controlled by multiple conditions therefore always show and hide in the DOM tree
  2. manual focus cannot be done. tried couple approaches: 1) settimeout: won't work, since time is different with different response; 2) randomly focus: bad UX
  3. auto focus will be reset everytime the DOM changes.
arekmano commented 6 years ago

this may be naive, but can we programatically call focus upon completion of the http request?

Vynny commented 6 years ago

You could probably put it in the callback which is called once the request is completed.

brucecaii commented 6 years ago

@arekmano @Vynny It is not the callback, it is the repeatly show the zeus' response in multiple blocks. The input box will show up after the zeus' response is fully showed && all conditions are met, which will take random time. When the prediction is made, the time zeus' response to print on the screen is varies too.

brucecaii commented 6 years ago

Same issue to the landing page too. The first time you open the modal to enter your name, the input box is focused. If you close it and open again it just won't focus again. I guess the v-if just change the DOM and deactivate the autofocus (means it only works when the DOM is loaded at the first time)

naregeff commented 6 years ago

Testing, can't get it to work.

arekmano commented 6 years ago

Solution was significantly more complex than initially expected. This will require manipulation of the vue rendering lifecycle to successfully implement. Moved to backlog