question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Input] Size prop only works on TextField, not on Input

See original GitHub issue
  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

I’d like to be able to tell regular Inputs, or OutlinedInputs to have smaller size, the problem is the size API is only exposed on TextField, but not the more basic input components.

These 2 components don’t result in the same effect:

<OutlinedInput size="small" /> // No effect

<TextField variant="outlined" size="small" /> // Small size works

Here’s a reproduction: https://codesandbox.io/s/agitated-gould-qjd6k

I would expect to be able to change the size in either component, and it “just works”. So I believe the margin should be changed in the child components, and TextField just passes the size along to the input component, instead of FormControl.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Nov 27, 2020

@mayralgr It’s definitely good to take, make sure you start from the next branch. We have also the opportunity to introduce breaking changes if they offer improvements in exchange, but we would need to evaluate them, case by case as they are costly too.

0reactions
oliviertassinaricommented, Dec 3, 2020

The test could be a simple as checking the class names applied.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Input] Size prop only works on TextField, not on Input #19796
I'd like to be able to tell regular Inputs, or OutlinedInputs to have smaller size, the problem is the size API is only...
Read more >
Put length constraint in a TextField in react js - Stack Overflow
Just use the base <input> attributes using inputProps . The actual answer is this: inputProps={ {maxLength: 22} } // Result => <input maxlength= ......
Read more >
<input>: The Input (Form Input) element - HTML
A string specifying the <form> element with which the input is associated (that is, its form owner). This string's value, if present, must ......
Read more >
React Text Field component - Material UI - MUI
The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field...
Read more >
Set a character limit on an Input field in React.js | bobbyhadz
Use the `maxLength` prop to set a character limit on an input field in React, e.g. ` `. The `maxLength` attribute defines the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found