`MInput`'s `<input>` inherits `border-radius` from its container

berwyn commented 2 years ago

Bug description

Creating an MInput of either variant sets a border radius on the container, however because the is set to inherit border-radius, the <input> itself has a border radius causing characters to be cut off. This especially affects thin characters, those with ascenders or descenders, and IME candidates.

You can see here that the element has inherited the border-radius from its parent, in spite of not having a border

You can see here in action a latin lower-case letter j gets horrifically cut off and instead looks like i

Similarly, when using a Japanese IME, the character 肉 and the IME candidate underline is cut-off

Reproduction

<m-input placeholder="Sample Text" />

Environment

System:
    OS: macOS 11.6.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 10.49 GB / 64.00 GB
    Shell: 5.8.1 - /usr/local/bin/zsh
  Binaries:
    Node: 12.18.2 - ~/.volta/tools/image/node/12.18.2/bin/node
    npm: 6.14.5 - ~/.volta/tools/image/node/12.18.2/bin/npm
    Watchman: 2022.02.28.00 - /usr/local/bin/watchman
  npmPackages:
    @square/maker: ^6.5.2 => 6.5.2 
    vue: ^2.6.14 => 2.6.14 
    webpack: ^5.37.0 => 5.38.1

Addressed by

No response

Can you contribute a fix?

[X] I’m interested in opening a pull request for this issue.

pretzelhammer commented 2 years ago

hey @berwyn thanks for reporting this! if you're interested in submitting a PR for this issue please feel welcome to do so, also if you have any questions or need any help please feel welcome to ask me here or on Slack!

berwyn commented 2 years ago

Closed by #246

square / maker