Div around inputs causing layout issue

[ducksoupdev]

Hi, Thanks for a great library 👍

I have encountered an issue with append/prepend fields where rendered inputs are causing a layout problem.

Because the inputs are wrapped in a <div> this results in the field being truncated visually and not filling the available space. The following shows a normal input above an append/prepend input.

Can the inputs be wrapped in a <React.Fragment> to prevent this side effect?

[andyhu92]

Hi, thanks for checking my library! Could you show me your JSX also? The input inside TextInputGroup is not wrapped with <div> in my source code actually, let me investigate more after seeing your code.

[ducksoupdev]

Here is a snippet of JSX for the input that is causing the issue.

<label className='mt-2'>Accounting scheme(s)</label>
<div className='row'>
  <div className='col-md-4'>
    <div className='form-group'>
      <InputGroup>
        <TextInput name='accountingScheme' value={this.state.accountingScheme} required
          onChange={this.handleChange}
        />
        <InputGroupAddon addonType='append'>
          <Button id='SchemeInfo' type='button'>
            <svg className='icon' width='20' height='20'><use xlinkHref='#info' href='#info'></use></svg>
          </Button>
          <UncontrolledTooltip placement='right' target='SchemeInfo'>
            Use this box to record details of any Tax accounting schemes that you use
          </UncontrolledTooltip>
        </InputGroupAddon>
      </InputGroup>
    </div>
  </div>
</div>

The Button, InputGroup, InputGroupAddon, UncontrolledTooltip components are all from reactstrap.

[andyhu92]

Oh I see, I thought you were using the TextInputGroup from my library, sure I will make the change and let you know today!

[andyhu92]

@ducksoupdev I've updated the package

[ducksoupdev]

Thanks for the prompt fix. Awesome 👍