Proposal: Pressing 'Enter' should 'save'

[jfstephe]

First off: Awesome library. Many many thanks!

Is your feature request related to a problem? Please describe. Entering a hex (for example) value and pressing enter doesn't 'save' which is what I'd expect. At the moment this is effectively being cancelled in my scenario as the Grid housing the control closes the Pickr when it receives an 'enter' keydown. Perhaps I'm missing something?

Describe the solution you'd like Pressing 'Enter' pretty much anywhere in the popup would call 'Save'.

Describe alternatives you've considered Thinking about looking into blur events to help me, but would rather not go there. This isn't 100% critical but an annoyance. If you are in that area perhaps you could consider this in the future. If it becomes more of an issue I'll raise a PR in the future.

Additional context I'm using this control as a cell editor in ag-grid so I don't have full control over my world.

[simonwep]

You're welcome 😊

If you have access to the pickr instance you may consider doing it this way:

pickr.on('init', instance => {

    // Pickr input element
    const {result} = instance.getRoot().interaction;

    // Magic happens here
    result.addEventListener('keydown', e => {
        if (e.key === 'Enter') {
            instance.applyColor(); // "Saves" the color
            instance.hide(); // Hides the modal
            // You may call e.stopImmediatePropagation(); if you want to prevent event-bubbling
        }
    }, {capture: true}););
});

[jfstephe]

Awesome - I'll try it out. Thanks :-). If you are not thinking of adding this as standard functionality feel free to close this issue, else I'll leave it open to track this, when/if it makes it's way into the component.

[simonwep]

I think I'll make another README with code-samples OR make this a out-of-the-box feature! I'll update this thread in the next days.

[simonwep]

I've created a examples.md file were coming requests like this can be demonstrated :)