Can't erase COLOR input content even with keyboard DELETE KEY

This topic has 4 replies, 2 voices, and was last updated 1 year, 8 months ago by Peter.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
March 9, 2023 at 8:56 PM #40924

Teia Local Studio
Participant

Hey guys,

I was trying to debug my other problem regarding COLOR metabox and suddenly came across a new one.

Updated MB to 5.6.17 and now, all my COLOR fields are broken.

1. When I first load a metabox, it's empty, ok so far
2. Then, I pick a regular HEX color. OK! It saves perfectly!
3. But then -------- I can't erase it anymore! If I press CLEAR button, the input field flashes and the value does not go away. Even if I select the value with my mouse and press DELETE, it still there when I reload.
4. BUT --- if I change the value, is saves normally.
5. BUT --- if I try to change to a RGBA value, the inpu flashes, and the HEX keep being there, stubborn!

I use a custom theme of ime, so:

1. I dissected it deactivanting every piece of custom code, problem still there
2. I reveted my gutemberg-turn-off functions, problem still there
3. I turned off all extensions! No help!

BUT, it is working normally on TWENTY-TWENTY-ONE theme.

I need a help here... What could be the problem in my theme the prevents a color input field value to be correctly AUTOCOMPLETED or even DELETED?

Is there a JS or something that TWENTY-TWENTY-ONE has that I am missing in my custom theme? I am really lost here.

THANK YOU for any help.
G.

Add New Note to this Reply

March 10, 2023 at 1:26 AM #40929
Teia Local Studio
Participant
UPDATE:

I can't get COLOR metabox to work correctly even in a BRAND NEW WordPress setup 6.1.1 with ONLY METABOX 5.6.17 and default themes like TWENTY-TWENTY-ONE, TWO or THREE.

No custom modifications, no custom hacks, nothing disabled. Just a out of the box setup...

I am using this code to call a COLOR test metabox:
```
<?php
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = [
        'title'      => 'Metabox Test',
        'post_types' => 'post',
	'context' => 'side',
        'fields'     => [
           [
                'name'          => 'Color',
                'id'            => 'my-color',
                'type'          => 'color',
		'alpha_channel'	=>  true
				
            ],
        ],
    ];

    return $meta_boxes;
} );
?>
```
Add New Note to this Reply
March 10, 2023 at 2:04 AM #40930
Teia Local Studio
Participant
UPDATE:

I was able to track down the root of the problem. It has something to do with lines 12, 13, 14, and 15 in COLOR.JS, inside META-BOX/JS/ (version 5.6.17).
```
function triggerChange() {
			if ( null !== mode && 'hex' !== mode ) {
				const color = new Color( $this.iris( 'option', 'color' ) );
				<strong>!!!! HERE ------></strong>  $this.val( color.toCSS( mode ) );
			}

			$this.trigger( 'color:change' ).trigger( 'mb_change' );
		}
```
If I remove/comment the line --- $this.val( color.toCSS( mode ) ); --- everything starts working fine again with my COLOR metaboxes.

Am I missing something in the metabox COLOR call? Some parameter? OPTION? The documentation does not mention anything like that.

Add New Note to this Reply
March 10, 2023 at 2:32 AM #40931
Teia Local Studio
Participant
OH MY.

SOLVED!
I can't believe I spent a whole morning trying to find a solution... for something was not broken!
OUCH! It seems I just need to set the color mode in all my COLOR metaboxes! Doing it, fixed the problem.
```
array(
	'name' => __('Cor de fundo geral do menu', 'tl'),
	'id' => 'visual-menu-cor-bg',
	'type' => 'color',
	'desc' => __('Padrão: Preto', 'tl'),
	'alpha_channel' => true,
	'columns' => 12,
	'js_options' => array(
		'mode' => 'hex'
	),
),
```
QUESTION:

Is that possible to make a safe call if the setting is missing? (In the COLOR.JS). If not present it breaks again. I will need to navigate in all my theme boxes to correct this... and worse, in several online/production websites, one by one, to add the JS_OPTIONS["mode"]["hex"]...

Or, can someone guide me to correct it injecting some JS in the ADMIN side? I tried injecting the following, but it did not help.

Inside a custom JS I have enqueued on ADMIN:
```
jQuery('.rwmb-color').iris({
	mode: 'hex',
});
```
Thanks, guys!

Add New Note to this Reply
March 10, 2023 at 10:21 PM #40946

Peter
Moderator

Hello,

Thank you for your feedback and share the solution.

Currently, the mode hex should work as the default setting. I've escalated this issue to the development team to fix it in the next update.

Add New Note to this Reply
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.