ReactStrap input group bug (not 100% width) - css

Question

Does anyone have this bug where an input group addon or dropdown is taking up half of the entire width instead of a 100%. (basically the InputGroupButton is taking up the other 50% so 100% width spread automatically between two elements but in the Reactstrp docs there's every indication that this is goes against expected behavior)
I want my input group to be 100% width like the rest.
https://reactstrap.github.io/components/input-group/
this is what I currently have :
and if I open Inspect Element :
you can see that the InputGroupButton isn't setting a padding or a margin like "auto" or something similar which you'd expect to be responsible for this.
here's the small snipet of react render concerning the password field :
render() {
return (
<Label className="password">
<InputGroup>
<Input
className="password__input"
placeholder="Mot de Passe"
type={this.state.type}
onChange={this.passwordStrength}
/>
<InputGroupButton><Button onClick={this.showHide}>
{this.state.type === 'password' ?
<i className="fa fa-eye" aria-hidden="true" />
:
<i className="fa fa-eye-slash" aria-hidden="true" />
}</Button></InputGroupButton>
</InputGroup>
<span
className="password__strength"
data-score={this.state.score}
/>
</Label>
);
}
and here's the render that calls it (it's called at "ShowPassword") :
render() {
return (
<div>
<Button color="info" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader>
<ModalBody>
Veuillez renseigner les champs ci-dessous afin de créer votre compte
<InputGroup>
<Input placeholder="Nom d'utilisateur" />
</InputGroup>
<InputGroup>
<Input placeholder="E-mail" />
</InputGroup>
<InputGroup>
<ShowPassword />
</InputGroup>
<InputGroup>
<Input placeholder="Confirmer"/>
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Envoyer</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Annuler</Button>
</ModalFooter>
</Modal>
</div>
);
}

Answer 1

This is not a bug. You are using reactstrap an unintended manner. reactstrap is based on Bootstrap CSS Library. Bootstrap expects you to structure your elements and CSS classes in a certain way it describes in the documentation. If we don't follow them, we can't get the expected result.
As an example, Bootstrap only expects certain elements like Input, InputGroupButton and InputGroupAddon inside the InputGroup. But in your case, if we replace ShowPassword with its actual JSX structure, you will have a Label inside InputGroup and another InputGroup inside the Label. What is why it is not rendered as expected.
First, to wrap your ShowPassword, you should use a div instead of a Label.
render() {
return (
<div className="password">
<InputGroup>
<Input
className="password__input"
placeholder="Mot de Passe"
type={this.state.type}
onChange={this.passwordStrength}
/>
<InputGroupButton>
<Button onClick={this.showHide}>
{this.state.type === "password"
? <i className="fa fa-eye" aria-hidden="true" />
: <i className="fa fa-eye-slash" aria-hidden="true" />}
</Button>
</InputGroupButton>
</InputGroup>
<span className="password__strength" data-score={this.state.score} />
</div>
);
}
and then you should remove additional InputGroup which wrap your ShowPassword component.
render() {
return (
<div>
<Button color="info" onClick={this.toggle}>
{this.props.buttonLabel}
</Button>
<Modal
isOpen={this.state.modal}
toggle={this.toggle}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader>
<ModalBody>
Veuillez renseigner les champs ci-dessous afin de créer votre compte
<InputGroup>
<Input placeholder="Nom d'utilisateur" />
</InputGroup>
<InputGroup>
<Input placeholder="E-mail" />
</InputGroup>
<ShowPassword />
<InputGroup>
<Input placeholder="Confirmer" />
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>
Envoyer
</Button>{" "}
<Button color="secondary" onClick={this.toggle}>
Annuler
</Button>
</ModalFooter>
</Modal>
</div>
);
}
Hopefully, now you will get the expected the result.