reactstrap : how to make dropDown menu's size fill all of the available space

Question

I am using reactstrap dropdown component as follows:

              <Dropdown 
                isOpen={this.state.dropdownOpen[3]}
                toggle={() => {
                  this.toggle(3);
                }}
                className="mb-10" 
              >

                <DropdownToggle caret> {this.state.dropDownValue}</DropdownToggle>
                <DropdownMenu>
                  <DropdownItem >  <div onClick={this.changeValue}>operateur_sav</div></DropdownItem>
                  <DropdownItem >  <div onClick={this.changeValue}>agent_support_tel</div></DropdownItem>
                  <DropdownItem >  <div onClick={this.changeValue}>agent_magasin</div></DropdownItem>
                </DropdownMenu>
              </Dropdown>

which gives the following result:

This is all the form's code:

 <Form noValidate onSubmit={this.onSubmit}>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Nom</InputGroupText>
              </InputGroupAddon>
              <Input
                type="text"
                id="nom"
                name="nom"
                value={this.state.nom}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-user"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Email</InputGroupText>
              </InputGroupAddon>
              <Input
                type="email"
                id="email"
                name="email"
                value={this.state.email}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-envelope"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Role</InputGroupText>
              </InputGroupAddon>
              <Dropdown
                isOpen={this.state.dropdownOpen[3]}
                toggle={() => {
                  this.toggle(3);
                }}
                className="mb-10"
              >
                <DropdownToggle caret>
                  {" "}
                  {this.state.dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>operateur_sav</div>
                  </DropdownItem>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>agent_support_tel</div>
                  </DropdownItem>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>agent_magasin</div>
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-id-badge "></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Mot de passe</InputGroupText>
              </InputGroupAddon>
              <Input
                type="password"
                id="mot_de_passe"
                name="mot_de_passe"
                value={this.state.mot_de_passe}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-asterisk"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup className="form-actions">
            <Button type="submit" size="sm" color="primary">
              Créer
            </Button>
          </FormGroup>
        </Form>

I have looked for ways to make the dropDown menu 'role' take-up the same size as the other input elements so that all the form rows's width will be the same.
My research has led me to 2 solutions, none of which worked:
SOLUTION 1: **
Since in reactstrap : The DropdownToggle uses the Button component internally, meaning it also accepts all the props the Button component accepts., I could use **size and block like in button elements:

  <Button color="primary" size="lg" block>Block level button</Button> 

which renders like this:

So I added :

size="lg" block  

to the Dropdown element, but all it did is slightly enlarge the size of the dropDown menu.
Solution 2:
I tried to wrap the inside a with justified prop:

<ButtonGroup justified>
  <DropdownButton>...</DropdownButton>
</ButtonGroup>

This made absolutely no difference.
Also using:

 width: 100%;

didn't make any difference?
Any idea how to solve this?

Answer 1

Here is a working code for your case - https://codesandbox.io/s/gracious-payne-b1rv4

There were couple of things which were wrong -

1. dropdownOpen - this should be set to boolean value but was getting assigned to some array.
2. className - this should a name and not style.

Give a className to DropdownToggle element and add width: 100% to that className, then your dropdown should be able to take up the entire width.