simonwep / simonwep/pickr

Conflict between Clear event and Save event

Open
#306 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

improvement question
Dominant language
JavaScript
Stars
4.5k
Forks
292
PR merge metrics
No merged PRs in 30d

Description

What is the current behavior?

why click on the clear button would fire save event? It creates unwanted behavior.
also related to this:
if we use color on save event something like this:

color.toRGBA().toString(0)

when clicking on the clear button it would throw an error in console.log because after clicking on the clear button it would fire save event and because the color is null it would throw an error in this situation and every code in the clear event gets ignored and won't run.

Please provide the steps to reproduce and create a JSFiddle.

in this example, I added an alert to "save event". after clicking on the clear button, an alert is shown. it is an undesired behavior

  .on('save', (color, instance) => {
    alert()
  }).on('clear', instance => {
  })
Please provide the steps to reproduce and create a JSFiddle.

Click on clear button would throw an error because the clear button is calling save but the color is null now.
Meanwhile in this mode, if we have some code on the clear event, they won't run.

  .on('save', (color, instance) => {
    console.log('Event: "save"', color.toRGBA().toString(0));
  }).on('clear', instance => {
    console.log('Event: "clear"');
  })
What is the expected behavior?

clear button should not fire save event. we may encounter other problems later.
also if we use color.toRGBA() on save event it should not throw an error after clicking on clear button, also codes on the clear event in this situation should run.
temporary fix to this issue is using instance._color.toRGBA() on save event if we want to use the clear button as well. but firing save event is still the main problem.

Your environment:
Version (see Pickr.version): latest - 1.8.2
Used bundle (es5 or normal one): both
Used theme (default is classic): all themes
Browser-version:  chrome 96 / firefox 94 / safari 15
Operating-system:  macOS Monterey 12.0.1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked JSFiddle reproductions and trace Pickr's save and clear event callbacks, including the null color passed to save. Done means clicking Clear does not invoke save, the clear callback runs, and the shown color conversion no longer throws an error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.