Skip to content

feat(@clayui/css): LPD-53483 Adds inline-text-input #6056

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

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

pat270
Copy link
Member

@pat270 pat270 commented May 13, 2025

@ethib137
Copy link
Member

Shouldn't we be adding this to our docs site too? https://clayui.com/docs/components/input

@pat270 pat270 force-pushed the LPD-53483 branch 2 times, most recently from de0a1e1 to 23e1d85 Compare May 13, 2025 15:56
Copy link
Member

@matuzalemsteles matuzalemsteles left a comment

Choose a reason for hiding this comment

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

I added some comments but overall it looks good.

}: IInlineTextProps) => {
const inputRef = React.useRef<HTMLDivElement>(null);

const [inputValue, setInputValue] = React.useState('');
Copy link
Member

Choose a reason for hiding this comment

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

To follow the pattern of other components we need the state to be controlled or uncontrolled you can see how we implemented this in Autocomplete for example.

Comment on lines 184 to 196
const InlineText = React.forwardRef<
HTMLDivElement | HTMLSpanElement | HTMLLabelElement,
IInlineTextProps
>(
({
children,
className,
id,
placeholder,
readOnly,
spritemap,
...otherProps
}: IInlineTextProps) => {
Copy link
Member

Choose a reason for hiding this comment

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

We need to pass the ref forward to the span element of the component and in this case we just need to set the ref type to HTMLSpanElement or just pass it to the root element which might be better for the developer.

@pat270 pat270 requested a review from matuzalemsteles May 16, 2025 21:59
Copy link
Member

@ethib137 ethib137 left a comment

Choose a reason for hiding this comment

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

Hey @pat270 , I think with this current implementation we don't have anyway to display a saved value in the inline input on the first load? So, the inline input will always be empty when it loads even if a value is passed to it. As long as we use contentEditable I don't think this will work, since content editable does not play nicely with React.

What was the reason for using content editable instead of an unstyled input?

@pat270
Copy link
Member Author

pat270 commented May 20, 2025

@ethib137 Good catch, I'll update it.

Standard inputs are a fixed width and can't grow with its content. There is some discussion at https://liferay.atlassian.net/browse/LPD-53482?focusedCommentId=2911231

@pat270 pat270 marked this pull request as draft May 20, 2025 23:35
@pat270
Copy link
Member Author

pat270 commented May 20, 2025

@ethib137 I've been trying to get the value to display in the contenteditable element, but I'm running into some React quirks. Using {value} in the contenteditable span causes the text cursor to move to the front which makes the text print out right to left.
cursor-to-front
I got it to work in uncontrolled mode by using defaultValue. The controlled component doesn't work. I have a question about why we need to support both types. Is it really necessary?

What was the reason for using content editable instead of an unstyled input?

I was hoping Lexicon could revisit the design / interactions and accommodate the limitations of the standard HTML input.

@pat270 pat270 added the on-hold label May 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants