georgealways / lil-gui

It seems impossible to copy the (hex) values from the color picker using ctrl+c. Also, right-clicking does not bring up a context menu to manually copy the value.

Sadly, this prevents me from migrating to lil-gui since the color picker was the one feature I wanted to enhance my GUI with.

The issue presents itself on the 'basic example' demo, using addColor(), no custom configuration required.

Hmm, I'm able to ctrl+c and right click. What browser and OS are you using?

I'm using Chrome on Ubuntu 22.04 :)

To confirm, you're talking about lil-gui's hex field (the input field to the right of the color well)—not the browser's color picker that pops up when you click the well? And this doesn't happen with, say, the string or number controller fields?

None of the event listeners on those fields should interfere with copying or right clicking, but unfortunately I don't have an Ubuntu machine to test with. Maybe another Ubuntu user could shed some light.

lil-gui/src/ColorController.js

Lines 43 to 59 in 9123986

    
           this.$text.addEventListener( 'input', () => { 
        
           	const tryParse = normalizeColorString( this.$text.value ); 
        
           	if ( tryParse ) { 
        
           		this._setValueFromHexString( tryParse ); 
        
           	} 
        
           } ); 
        
           this.$text.addEventListener( 'focus', () => { 
        
           	this._textFocused = true; 
        
           	this.$text.select(); 
        
           } ); 
        
           this.$text.addEventListener( 'blur', () => { 
        
           	this._textFocused = false; 
        
           	this.updateDisplay(); 
        
           	this._callOnFinishChange(); 
        
           } );

The problem was with the color picker popup itself - I now see that this uses the browser's built-in color picker.

So, this must be a Chrome bug that we don't really have any control over. Sorry for the inconvenience!

	this.$text.addEventListener( 'input', () => {
	const tryParse = normalizeColorString( this.$text.value );
	if ( tryParse ) {
	this._setValueFromHexString( tryParse );
	}
	} );

	this.$text.addEventListener( 'focus', () => {
	this._textFocused = true;
	this.$text.select();
	} );

	this.$text.addEventListener( 'blur', () => {
	this._textFocused = false;
	this.updateDisplay();
	this._callOnFinishChange();
	} );

Cannot copy/paste values from the color picker