Fix opacity input validation

[hamzahxx]

Description

Fixed the bug #1727 where users could enter values above the maximum allowed range for numeric inputs, specifically with the opacity setting. The NumberUnitInput component wasn't enforcing the min/max constraints defined in the style configuration. Added proper validation to clamp numeric values to their defined ranges when the input loses focus.

Related Issues

fixes #1727

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Tested various out-of-range inputs:

• Large positive values (10000, 10000000, 101) were correctly clamped to 100%
• Negative values (-100, -1) were correctly clamped to 0%

Values were properly clamped when:

• Clicking elsewhere on the interface
• Pressing Enter key

Additional Notes

This fix improves user experience by enforcing the style constraints defined in the style configuration. Before this fix, users could enter invalid values. The change respects the min/max range while still allowing flexible input during typing.

---

Important

Fixes input validation in NumberUnitInput to clamp values to defined min/max range on blur, addressing bug #1727.

• Behavior:
  • Fixes input validation in NumberUnitInput to clamp values to min/max range on blur.
  • Handles out-of-range inputs by clamping to 0% or 100% for opacity.
• Functions:
  • Modifies handleBlur to clamp numberValue using min and max from elementStyle.params.
  • Uses Math.min and Math.max to ensure values are within range.
• Testing:
  • Validated clamping with large positive and negative values.
  • Ensured clamping occurs on blur and Enter key press.

^{This description was created by for 16d770b. It will automatically update as commits are pushed.}

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 16d770b in 1 minute and 48 seconds

More details

• Looked at 22 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx:95

• Draft comment:
  Ensure clamping is applied correctly: The new code retrieves min and max from params (defaulting to -Infinity/Infinity) and clamps the parsed value accordingly. Confirm that clampedValue.toString() meets formatting requirements (e.g., preserving decimals if needed).
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 50% <= threshold 50%
  The comment is asking the author to confirm that the clamping logic and formatting are correct. It suggests a specific check on the formatting of the clamped value, which is a valid concern in terms of code correctness. However, it also asks for confirmation, which is against the rules. The comment could be improved by suggesting a specific test or check rather than asking for confirmation.

2. apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx:95

• Draft comment:
  Clamping logic works as expected. However, consider handling cases when Number.parseFloat returns NaN (e.g., empty or invalid input) to prevent sending a 'NaN' value.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

3. apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx:127

• Draft comment:
  It appears that 'editorEngine.history.startTransaction' is referenced without invoking it. If this is intended to call the function, please add parentheses (i.e., change it to 'editorEngine.history.startTransaction()') to ensure the transaction actually starts.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_wx7y5Z0JufJfEgtA

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[Kitenite]

Awesome thanks @hamzahxx !