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
textinput: fix placeholder size #452
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR. I think it makes more sense to implement this on Decrediton.
if (placeholder == undefined) | ||
return false; | ||
|
||
if (placeholder.lenght) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
typo here. Should be length
.
@@ -24,7 +24,15 @@ const TextInput = ({ | |||
useMountEffect(() => { | |||
autoFocus && input && input.current.focus(); | |||
}); | |||
|
|||
|
|||
const isPlaceholder = (placeholder) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The name of this function should be hasPlaceholder
. Also, if placeholder === ""
your code will return undefined
.
<input | ||
id={id} | ||
ref={input} | ||
placeholder={placeholder || " "} | ||
size={isPlaceholder(placeholder) ? placeholder.length : undefined} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The idea is nice and it fixes the issue you linked. But we don't want all TextInputs with placeholders working like this.
<input | ||
id={id} | ||
ref={input} | ||
placeholder={placeholder || " "} | ||
size={isPlaceholder(placeholder) ? placeholder.length : undefined} | ||
className={classNames(styles.textinput, inputClassNames)} | ||
type={type} | ||
{...props} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We spread the props object here so people can customize TextInputs outside the pi-ui package. That means you can just pass a size
prop from Decrediton and pi-ui will just "forward" it to the HTML input.
This pr fix the problem in this issue