Additional info: Curator name

[jvwong]

• made a TextEditableComponent that mimics the behaviour of the Google Doc title component.

  • props
    • label, placeholder, autofocus
    • cb: callback to handle a 'saved' value
  • saving happens when you key 'Enter' or click off/blur
  • reset on key 'Escape'

• Issues

  • When the editor 'submit' is clicked the TaskView tippy covers the 'submit' button
  • Some jitter on hover over text box
  • Label and text input baseline aren't the same

Refs #729

[maxkfranz]

It may improve the UX to have it update on a long (keydown) debounce (e.g. 1s or 2s). A user isn’t going to know they have to blur the box. They may just close the tab, since they’re done.

If it were to look like an ordinary text box, you wouldn’t need the ‘click here to edit’ text. ‘Click here’ is a design anti-pattern. You could show a message below or a check icon within the text box to give feedback to the user.

[jvwong]

It may improve the UX to have it update on a long (keydown) debounce (e.g. 1s or 2s). A user isn’t going to know they have to blur the box. They may just close the tab, since they’re done.

Ok yeah - are you using debounce in the grounding tooltip?

If it were to look like an ordinary text box, you wouldn’t need the ‘click here to edit’ text. ‘Click here’ is a design anti-pattern. You could show a message below or a check icon within the text box to give feedback to the user.

ok

[maxkfranz]

Yeah, similar to the grounding. It’s just lodash _.debounce()

[jvwong]

• Look like text box
• Auto-submit function. Also turns out that the blur ends up firing if you close the window/tab so it submits anyways
• Check box to indicate submitted

Any idea how to translate that tooltip up so it doesn't cover the button? Notice this problem only happens on initial submit button click and doesn't happen if you hide/show the tippy.

[maxkfranz]

It could be (1) how you've positioned things in the tooltip, or it could be (2) because the button is swapped out.

If it's (2), you could try adding the tippy on a div that wraps the button, rather than the button itself. Presumably, the wrapper would be static and only the button would be swapped by react.

[maxkfranz]

Or you could try changing the options (e.g. sticky): https://atomiks.github.io/tippyjs/v5/all-props/

[jvwong]

Or you could try changing the options (e.g. sticky): https://atomiks.github.io/tippyjs/v5/all-props/

OK that did the trick