Do not update input field if user types in it

[balazs-zsoldos]

Description

{Please write here}

Context

bootstrap-colorpicker version: 3.0.3

Options: { format: 'hex', autoInputFallback: false }

Expected behavior

When I type a color, it should not update it at all. Input field should be updated only if I select a color with my mouse from the popup window.

Actual behavior

If I start typing #AAA it is replaced with #AAAAAA. If I try to push backspace to correct it, it always writes back a character.

Live Example

You can use your jsfiddle to check, replace the options with the above.

[andrewv86]

Yup, having the exact same issue, cannot type out specifically the desired color I want on any of the website examples.

[balazs-zsoldos]

With some workarounds, the colorpicker works as expected. First, I added an extension to always resolve the color code that is in the input field. Example is with typescript:

this.myInput.colorpicker('registerExtension', function(this: any, colorPickerParam: any, b: any) {

    this.resolveColor = () => {
        return this.myinput.val();
    }
}, {});

And in the colorpickerChange event I do call setvalue again and set the focus on the input field. Calling setValue is necessary otherwise if I clicked with the mouse on the popup the small circle would show the last selected color (not the current one). I call focus on the input element as sometimes it does not get back focus after I click with the mouse on the popup and if I start pushing TAB, I can navigate away without closing the popup. Example in typescript:

colorPicker.on('colorpickerChange', (e: any) => {
    if (e.value === undefined || e.value === null) {
        hexStringValue = null;
    } else if (typeof e.value === 'string') {
        hexStringValue = e.value;
    } else {
        hexStringValue = e.value.toHexString().toLowerCase();
    }
    if (typeof e.value !== 'string') {
        this.myInput.colorpicker('setValue', hexStringValue);
        setTimeout(() => {
            this.myInput[0].focus();
        }, 0);
    }
});

These are workarounds, but it would be nicer if the bootstrap-colorpicker worked in this way without the workarounds.

[OneOfA11]

Nope, the workarounds does not work at all.

[balazs-zsoldos]

@OneOfA11 It works for me with latest stable. I am sorry to hear that it does not work for you.

[itsjavi]

hi @balazs-zsoldos, the purpose of autoInputFallback is to stop falling back to a fallback color in case the input contains an invalid one. Whenever a valid color is typed, then the plugin converts it to the proper format, that's why the input changes.

Maybe there could be another option to completely disable string substitution on input typing. That could be useful for other cases. What do you think?

(Btw it is nice to see that someone finds the extensions API useful)

[balazs-zsoldos]

@itsjavi Yes, "another option to completely disable string substitution on input typing" would be pretty useful. I think that is how 2.x works and the component is more usable if I use only the keyboard during filling the form.

[benjamindell]

This is an important feature for us as well

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for all your contributions.

[rstueven]

@balazs-zsoldos Would you happen to have a JavaScript/jQuery version of your workaround? Typescript isn't an option for my project. This is what I'm trying, but no luck...I get Uncaught TypeError: n.resolveColor is not a function when I change the string in the text box or when I pick a color from the picker.

$(".color-picker").colorpicker({
      format: 'hex',
      autoInputFallback: false,
      registerExtension: function (e, colorPickerParam, b) {
        e.resolveColor = function() {
          return this.val();
        }
      }
    }).on('colorpickerChange', function(e) {
      var hexStringValue = null;
      if (e.value === undefined || e.value === null) {
        hexStringValue = null;
      } else if (typeof e.value === 'string') {
        hexStringValue = e.value;
      } else {
        hexStringValue = e.value.toHexString().toLowerCase();
      }
      if (typeof e.value !== 'string') {
        this.colorpicker('setValue', hexStringValue);
        setTimeout(function() {
          this[0].focus();
        }, 0);
      }
  });

To whom it may concern: Please fix this. It's annoying for the user to only be able to type three characters before having the colorpicker override whatever they had in mind. (E.g. "fed" gets changed to "FFEEDD")