Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: Pressing 'Enter' should 'save' #187

Closed
jfstephe opened this issue Dec 16, 2019 · 4 comments
Closed

Proposal: Pressing 'Enter' should 'save' #187

jfstephe opened this issue Dec 16, 2019 · 4 comments
Assignees
Labels
feature request New feature requested

Comments

@jfstephe
Copy link

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 simonwep added the feature request New feature requested label Dec 16, 2019
@simonwep
Copy link
Owner

simonwep commented Dec 16, 2019

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Owner

simonwep commented Mar 6, 2020

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

@simonwep simonwep closed this as completed Mar 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature requested
Projects
None yet
Development

No branches or pull requests

2 participants