Skip to content

Commit

Permalink
fix: color input changes while typing
Browse files Browse the repository at this point in the history
  • Loading branch information
SychO9 committed Nov 3, 2023
1 parent 679d327 commit 01d9fd4
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions framework/core/js/src/common/components/ColorPreviewInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,18 @@ export default class ColorPreviewInput extends Component {

attrs.type ||= 'text';

// If the input is a 3 digit hex code, convert it to 6 digits.
if (attrs.value.length === 4) {
attrs.value = attrs.value.replace(/#([a-f0-9])([a-f0-9])([a-f0-9])/, '#$1$1$2$2$3$3');
}
attrs.onblur = () => {
if (attrs.value.length === 4) {
attrs.value = attrs.value.replace(/#([a-f0-9])([a-f0-9])([a-f0-9])/, '#$1$1$2$2$3$3');
attrs.onchange?.({ target: { value: attrs.value } });
}

// Validate the color
if (!/^#[a-f0-9]{6}$/i.test(attrs.value)) {
attrs.value = '#000000';
attrs.onchange?.({ target: { value: attrs.value } });
}
};

return (
<div className="ColorInput">
Expand Down

0 comments on commit 01d9fd4

Please sign in to comment.