Skip to content

Fix Inputs interactive area #600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 23, 2025
Merged

Fix Inputs interactive area #600

merged 8 commits into from
May 23, 2025

Conversation

ariser
Copy link
Collaborator

@ariser ariser commented May 16, 2025

Why

Horizontal space in Inputs appear interactive, and should be interactive, but is not.
Clicking anywhere within visible input area should activate the field.

inactive-input-padding.mov

What

To address the issue:

  • Changed Inputs layout
  • TextField: introduced props startContent and endContent, that accept any ReactNode and render extra content before or after input control
  • SearchField: removed all code and remade the component on top of TextField, because they are exactly the same; SearchField now uses startContent to render its icon
  • PasswordField: used the same utility component to render the eye button as TextField uses to render endContent
  • Changed how icons/buttons placed inside Inputs behave:
    • before: hidden icons still occupy space
    • after: hidden icons are not rendered at all
    • why: hidden icons obscure interaction with the field in the same way; clicking any empty space should activate the field, but with hidden icons it's not the case

Also:

Remaining issues

  • Because of how Inputs are built, there is still non-interactive areas in some cases. In particular, because we use gap to create space between elements inside InputWrapper, these gaps don't have proper cursor, and aren't interactive. To be fixed in next iterations.

Copy link

vercel bot commented May 16, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
click-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 16, 2025 8:01pm

error: { control: "text" },
disabled: { control: "boolean" },
placeholder: { control: "text" },
readOnly: { control: "boolean" },
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

readOnly disappeared from the parameters list, because it's actually a part of the native input API, not of the click-ui component API.
And rightfully so, because we don't actually support this property. If you set readOnly together with clear, then it's possible to clear the field, despite it being read-only.

We need to

  • stop accepting any native property in component API. Because:
    1. we can't guarantee they will work, considering we have custom component logic (readOnly is an example)
    2. they clog up component API, making it hard to use
    3. it is not clear, which HTML element these props will be assigned to
  • properly support hand-picked properties like readOnly in the component
  • optionally, accept prop controlProps/controlAttrs that would accept all native attributes and pass them directly to the control

Copy link
Collaborator Author

@ariser ariser May 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also have a resize in the params list now, that doesn't actually work! Even for TextArea!
But it's also correct, because components do accept this property. They don't process it in any way, but they do accept it.

padding: ${theme.click.field.space.y} 0;
visibility: ${$show ? "visible" : "hidden"};
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there any reason we were hiding icons using visibility rather than not rendering them?

@ariser
Copy link
Collaborator Author

ariser commented May 16, 2025

@vineethasok vineethasok merged commit ec45762 into main May 23, 2025
6 checks passed
@vineethasok vineethasok deleted the textfield-active-area branch May 23, 2025 09:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants