Skip to content

Button inside of InputGroup does not render correctly when field does have helpText defined #663

@bedrich-schindler

Description

@bedrich-schindler

To reproduce this, paste this into the demo:

React.createElement(() => {
  const [fruit, setFruit] = React.useState('apple');
  const options = [
    {
      label: 'Apple',
      value: 'apple',
    },
    {
      label: 'Pear',
      value: 'pear',
    },
    {
      label: 'Cherry',
      value: 'cherry',
    },
  ];
  return (
    <InputGroup label="Your favourite fruit">
      <SelectField
        label="Your favourite fruit"
        helpText="This breaks the layout"
        onChange={(e) => setFruit(e.target.value)}
        options={options}
        value={fruit}
      />
      <TextField
        label="Variety"
        placeholder="Eg. Golden delicious"
      />
      <Button label="Submit" />
    </InputGroup>
  );
})

Results in:

Image

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

Status

🔖 To do

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions