Colour picker auto-prefills HEX value

[drawcard]

More information & discussion: elementor/elementor#1026

[appxmitch]

This is an issue with the Iris color picker, not Elementor, and this should not be closed because this is still an issue. It remains in the current version, which is leveraged by and most obvious in Elementor, but this issue exists in Iris, which is what the person linked to in their message.

The problem is that, when three or more values exist in a hex entry, it autofills to six values immediately (F00 becomes FF0000). This creates a lot of workflow issues for people who type hex values instead of pasting them into the box; if I'm typing out FA3400, for example, and I type FA3, the hex value autofills to FFAA33. When I go to delete what has been autofilled, at FFA the picker autofills to FFFFAA. Then if I continue to backspace and it reaches FFF, the picker autofills to FFFFFF.

This continues until all the values are highlighted and deleted, including the octothorpe, and when that is done, the autofill ceases.

[creador-dev]

@appxmitch Have you found any solution for this?

[creador-dev]

For anyone who wants a workaround for this issue. I have made one and it's working perfectly.

For this to work we need to add this js inside the plugin and which will be called at the end of the WordPress footer otherwise it won’t work as there is a function inside iris.js which we need to override to make this work. For calling this script at the end I have added a PHP script that will embed the file in the footer of WordPress.

Script for fixing autofill issue

Replace Classname with the class name of that color field.

(function ($) {
    $('.class-name').keyup(function(){
        $(this).off('keyup');
    });
})(jQuery);

PHP script to embed a file at the end

function my_scripts() {
	wp_register_script('my-script', plugin_dir_url( __FILE__ ) . 'assets/js/myscript.js','','1.1', true);
	wp_enqueue_script('my-script');
}
add_action( 'admin_enqueue_scripts', 'my_scripts' );

[buckmanhands]

Would love to see this get fixed finally. it is seriously frustrating to run into this issue in the tons of plugins that use the default color picker. Seems like a solution has been provided.