feat(@clayui/css): LPD-53483 Adds inline-text-input #6056
Conversation
|
Shouldn't we be adding this to our docs site too? https://clayui.com/docs/components/input |
pat270
force-pushed
the
LPD-53483
branch
2 times, most recently
from
de0a1e1 to
23e1d85
Compare
packages/clay-form/src/Input.tsx
Outdated
| }: IInlineTextProps) => { | ||
| const inputRef = React.useRef<HTMLDivElement>(null); | ||
|
|
||
| const [inputValue, setInputValue] = React.useState(''); |
There was a problem hiding this comment.
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.
packages/clay-form/src/Input.tsx
Outdated
| const InlineText = React.forwardRef< | ||
| HTMLDivElement | HTMLSpanElement | HTMLLabelElement, | ||
| IInlineTextProps | ||
| >( | ||
| ({ | ||
| children, | ||
| className, | ||
| id, | ||
| placeholder, | ||
| readOnly, | ||
| spritemap, | ||
| ...otherProps | ||
| }: IInlineTextProps) => { |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
|
@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 |
|
@ethib137 I've been trying to get the value to display in the contenteditable element, but I'm running into some React quirks. Using
I was hoping Lexicon could revisit the design / interactions and accommodate the limitations of the standard HTML input. |
https://liferay.atlassian.net/browse/LPD-53483