Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Changed incorrect readonly prop of Input by right one: readOnly #348

Merged
merged 1 commit into from
Oct 29, 2018

Conversation

Akronix
Copy link
Contributor

@Akronix Akronix commented Oct 26, 2018

the prop readonly of Input component is incorrect and therefore, it does not work. Replaced by correct one: readOnly.

Copy link
Contributor

@T4rk1n T4rk1n left a comment

Choose a reason for hiding this comment

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

💃

Copy link
Contributor

@valentijnnieman valentijnnieman left a comment

Choose a reason for hiding this comment

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

Thanks for contributing! What is wrong with the readonly prop in your opinion? I think it is supposed to be lowercase because it's supposed to be an attribute to the <input> HTML tag, as here: https://www.w3schools.com/tags/att_input_readonly.asp

@T4rk1n
Copy link
Contributor

T4rk1n commented Oct 26, 2018

@valentijnnieman The example in the react doc have it as readOnly.

https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes

@Akronix
Copy link
Contributor Author

Akronix commented Oct 27, 2018

Exactly. As @valentijnnieman pointed out, readonly is not recognized as a DOM attribute for the React input element (here we are using React or not rendering directly to an html tag). This is because of their camelCase convention:

In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased. For example, you can keep aria-label as aria-label.

Source: https://reactjs.org/docs/dom-elements.html

Actually, if you try to use readonly attribute in this component (Input) it doesn't work, but it does work for the Textarea component of dash-html-components which has this attribute as readOnly. That's how I found the bug.

@T4rk1n T4rk1n merged commit aa3557e into plotly:master Oct 29, 2018
@T4rk1n T4rk1n mentioned this pull request Oct 29, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants