V2 - solve focus management

[dxinteractive]

Really should be considered. Think about undo / redo stacks too.

Keeping track of focus

• Idea 1: infer focus from changes?
  • Doesn't necessarily relate well, multiple fields may update at once, multiple fields may exist for a piece of data
  • Might be necessary for push(), insertAfter() etc as there are no rendered elements at that time? Or can some clever hooks solve this?
• Idea 2: keep track of all rendered elements for a parcel id and store that to identify touched fields?
  • cant use elemtn references as they would change upon total page rerender
  • cant uniquely identify the same path being rendered in 2 places
  • if unique ids are required it might mean devs need to add a .pipe(name('hello')) to get a unique id for rendered fields

Probably requires sharedMeta to store whatever focus id is needed to be remembered.

Should it require the dev to explicitly say when they want focus shifted e.g. when push() is called?

• yes, focus might want to be on the add button still, or on the new field

Binding

Should it go:

• bind onFocus and onBlur to inputs, maybe as part of spread()
• keep track of what is in focus, but not as parcel state somehow so shifting focus doesn't count as entries in the undo / redo stack (or should it?).
  • alt idea: add it all, and undo / redo can be smart about skipping changes. May have other benefits.
• if only tracking changes and not focuses: when a change occurs, store the current focus too
  • changeRequest.originId already exists, so this could be used

.after(callback)

Make change methods return something, where a callback can be passed? how can this tell other rendered fields to do things?

[dxinteractive]

Could do the "push" thing with a modifier. Wouldnt work with history because its temporal:

things.toArray((thing) => {
    return <div key={thing.key}>
        <input {...thing.spread()} ref={(node) => thing.meta.isNew && node.focus()} />
    </div>;
})

parcel.pipe(isNew())

    .modifyDown(asNode(node => {
        return node.setMeta({
            isNew: !('isNew' in node.meta)
        });
    }))