[Input] custom padding alignment issue in IE11

Found a strange issue when trying to use Chakra UI in an app that targets IE11. If you put custom padding on an Input, it will start with the input text aligned to the bottom of the input. Clicking it will then cause it to jump. I think it has something to do with line-height but I haven’t been able to narrow it down exactly.

---

Demo:

Here’s the entire code for that:

function App() {
  return (
    <ThemeProvider>
      <CSSReset />
      <Box p={4}>
        <Text mb={4}>Custom padding:</Text>
        <Input autoFocus p={2} />
        <Text my={4}>Default padding:</Text>
        <Input />
      </Box>
    </ThemeProvider>
  );
}

And here it is deployed (make sure to use IE11 - it works fine in other browsers):

https://chakra-ui-issue-206.netlify.com/

[with-heart]

Such dedication to seeing this resolved!

Sorry for the stale spam. I’ll open a PR soon to prevent this from being tagged again.

[with-heart]

Sorry Justin! We’re actually going to close this because we’re focusing on the 1.0 future. We haven’t touched pre-1.0 in quite some time and don’t plan on any further releases unless there are vulnerabilities we need to fix.

See https://next.chakra-ui.com/ for more info on 1.0, which will be out asap!