ngneat/edit-in-place

Edit on focus or keyboard shortcut support

chezjohnny opened this issue · 5 comments

chezjohnny commented

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ x ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

For the moment I need the mouse to edit a field.

Expected behavior

Use the keyboard to edit the field. It would be great to extend openBindingEventand closeBindingEvent to other event than mouse. This will allow to control the editor/preview mode from the outside.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Make the edition more efficient.

geromegrignon commented

Hello, you are welcome to open a PR for this.

chezjohnny commented

Ok but what is the best way to do it: extend TriggerEvents or add a new input property to change the field state?

geromegrignon commented

I think it would be better to extend TriggerEvents to avoid duplication and as everything is pretty tied to the event handlers.

james-schwartzkopf commented

I looked into using this for our application, and currently I don't think it meets our needs. But, I figured I'd share how we are handling keyboard support.

Our case is a bit more complicated because we are trying to make an entire table row editable at once (I think similar to the group support, with more complex triggers and focus behavior).

We have two invisible elements that have tabIndex="0" so they can receive focus. If either receive focus we switch to edit mode, then depending on which of the elements received focus we focus either the first or last control in the row.

We then return to view mode when we see a focusin event on the document that is not in our tr, or is not an overlay element (we are using material so we can use the OverlayContainer service for this to avoid switching when mat-select opens, etc).

We still have a bunch of work to do, but that gives us the basics of supporting TAB and SHIFT+TAB.

Here is a simplified example:
https://stackblitz.com/edit/editable-table-row?file=src/app/editable-table/editable-row/editable-row.component.ts

  • 👍1
james-schwartzkopf commented

For those with less complicated needs than me, it turns out it's pretty easy to add tab navigation in a directive (although it would be better built in).

https://stackblitz.com/edit/track-focus-edit-in-place?file=src/app/track-focus.directive.ts