Color Generator not updating main color when replacing with a value without hashtag

[noahhorlacher]

Describe the bug
On the ionic color generator page, the corresponding '-shade' and '-tint' sub-variables don't update when replacing a hexcode in the main variable input fields with a value missing the hashtag.

To reproduce
Steps to reproduce the behavior:

1. Go to 'https://ionicframework.com/docs/theming/color-generator'
2. Click on the arrow to the right of any color input field such as 'Primary' to see the sub-variables
3. Select the current value (click on the input field and press CTRL+A) including the hashtag
4. Paste a hex code value missing the hashtag e.g. ff0000
5. The site auto-inserts the hashtag at the beginning, but doesn't auto-update the colors and values of the sub-variables, until you type in another character. It also doesn't update if it's not in focus anymore.

Expected behavior
After the site prepends a hashtag to the value, it's expected to auto-update the sub-variables.

Screenshots

Browser and OS

• OS: Ubuntu 20.04 LTS
• Browser: Firefox, Google Chrome
• Version: 77.0.1, 83.0.4103.116

[acran]

I tracked down the reason for this to this block:

ionic-docs/src/components/color-gen/variable-selector/color-gen-variable-selector.tsx

Lines 48 to 51 in bdf3a61

	if (input.matches('[type="text"]') && val[0] !== '#') {
	input.value = '#' + val;
	return;
	}

The fix should be to simply drop the return since it will still ensure that the input starts with a # and if it not yet a valid input (i.e. 7 characters long) it will be skipped by the subsequent check anyway:

ionic-docs/src/components/color-gen/variable-selector/color-gen-variable-selector.tsx

Line 58 in bdf3a61

if (input.matches('[type="text"]') && val.length !== 7) { return; }

It would also need to update val, too, and declaring it with let instead of const. So the fixed code would be:

    let val = input.value.trim();

    if (input.matches('[type="text"]') && val[0] !== '#') {
      input.value = '#' + val;
      val = input.value;
    }

[averyjohnston]

Thank you for the issue. Taking a look at the newest version of the docs, the bug mentioned here no longer occurs -- the shade and tint colors update as expected -- but now there's a slightly different issue: the main color doesn't update. It would be good if we could get these working consistently with each other.

[averyjohnston]

Latest iteration of the issue (see my previous comment) resolved via #2904. Thanks again for the report!