Change event is not triggered when changing back to initial value

[destrofer]

Version: 1.8.0 Browser: any

Steps to reproduce:

1. click on the input,
2. click on green or blue color in the dropdown (triggers change event),
3. click back on the red color in the dropdown (no event is triggered).

<input id="color_filter" value="#FF0000" />

$('#color_filter')
    .on('change', function() {
        console.log('onChange');
    })
    .spectrum({
        showPaletteOnly: true,
        showPalette: true,
        clickoutFiresChange: true,
        preferredFormat: 'rgb',
        palette: [
            ['#FF0000', '#00FF00', '#0000FF']
        ]
    });

There is no difference if clickoutFiresChange is set to true or false as well as the way you listen to change event.

[stevegreatrex]

@destrofer not sure if this helps you but I managed to work around this by switching to...

$('#color_filter').on('change.spectrum move.spectrum', function() {
  //...
});

The move event catches the change back to the original value and the change event catches any direct changes to the <input> (if you have that visible)

[nemeth-it]

Can confirm destrofer's issue.

@stevegreatrex : How you access the returned color-value of from the changed-event-function?

$('#colorPicker').spectrum({
    preferredFormat: "hex",
    showPalette: true,
    palette: colorPalette,
    color: canvas.backgroundColor,
    // change: function(color) {
    //     canvas.setBackgroundColor(color.toHexString(), canvas.renderAll.bind(canvas));
    //     $('#colorPicker span').attr('style', 'background: ' + color + '!important;' );
    // }
});

// Change Workaround for Intial Color Reselection
$('colorPicker').on('change.spectrum move.spectrum', function() {
    canvas.setBackgroundColor(color.toHexString(), canvas.renderAll.bind(canvas));
    $('#colorPicker span').attr('style', 'background: ' + color + '!important;' );
});

Offtopic: ~~Why are your both code example colorized and mine is just plan and uncolored? (use code button of the post-editor here)~~

@stevegreatrex : Thanks, works!

[stevegreatrex]

You can use the below to get the current value from the spectrum get method:

$('#color_filter').spectrum('get')

The reason for the code snippets being highlighted is that I have explicitly specified a language - in this case javascript:

```javascript
function syntaxHighlighting(one, two, three) { }
```

gives

function syntaxHighlighting(one, two, three) { }

[slfan2013]

Has this issue be taken care of?

I am not using @stevegreatrex 's javascript solution because I would like to specify the onchange in html.

<input type='text' id="id" class="spectrums" data-show-alpha="true" onchange = "on_change_function()"/>

[destrofer]

@stevegreatrex Thanks for a workaround, but I no longer need it since I started using a different color picker. Anyway, workaround is not a solution, so this issue should still be open until (if ever) it gets fixed.