ColorPicker's color field doesn't commit its value if the popover is dismissed via outside click

[LFDanLu]

Provide a general summary of the issue here

Reported via slack, user flow is as follows

1. Open ColorPicker
2. Modify the color field via keyboard input (e.g. 111111 or some other fully defined value
3. Click outside the ColorPicker's popover and note that the color change has not been saved

This is because React doesn't call blur on unmount, and ColorField only commit's its value on blur. Can be reproduced via https://react-spectrum.adobe.com/v3/ColorPicker.html.

This is causing confusion for end users since they don't know that they have to blur from the ColorField for it to commit the typed color change

🤔 Expected Behavior?

Ideally the color change would be committed when the popover is closed via click

😯 Current Behavior

keyboard inputted color change is not committed when the popover is closed via click

💁 Possible Solution

Perhaps the ColorField should commit if it receives a fully defined value? Or maybe we have ColorPicker commit on popover unmount?

🔦 Context

No response

🖥️ Steps to Reproduce

1. navigate to https://react-spectrum.adobe.com/v3/ColorPicker.html and open the popover for the ColorPicker
2. modify the color field to 111111
3. click outside the popover, note that the color hasn't changed

Version

3.35

What browsers are you seeing the problem on?

Other

If other, please specify.

All

What operating system are you using?

MacOS

🧢 Your Company/Team

Marketo

🕷 Tracking Issue

No response

[LFDanLu]

IMO this is a bug, will need to discuss with the team how to address since this involves v3 and doesn't have a direct S2 substitute

[snowystinger]

It's not just the ColorField, it's also the NumberField. They are backed by the same logic, so we don't want to commit when it gets a "complete" value for the same reason as NumberField doesn't do real time commits.

I think it should be possible to attach a global pointer listener, if the user clicks somewhere that isn't the field, then we commit. it'd be ahead of the blur event which happens after pointerdown.

[LFDanLu]

We can possibly get rid of

react-spectrum/packages/@react-aria/overlays/src/useOverlay.ts

Lines 154 to 159 in 9734737

	let onPointerDownUnderlay = e => {
	// fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846
	if (getEventTarget(e) === e.currentTarget) {
	e.preventDefault();
	}
	};

, will need to test. If it works then we can revert #9646