Clear Button of elements in multi mode of Typeahead is rendered underneath the label

[MichalskiMaximilian]

While im implementing a Typeahead with no special settings and with introduction of the examples page https://ericgio.github.io/react-bootstrap-typeahead/, the clear button is rendered underneath the element. Taking a look into the devtools of my browser i saw the there is a div with the selected element and then comes the button.

Is there a possibility to avoid this?

Kind regards Max

[ericgio]

The simplest approach would be to use the renderToken prop to customize rendering of the token. A more complex approach would be to use renderInput to customize the input rendering as well as the token.

Edit: I misunderstood the problem. This is a CSS issue, not a DOM customization issue.

[MichalskiMaximilian]

Unfortunatly is the result after the implementation of the renderToken or the renderInput the same. Is there some i made wrong i forgot?

<Typeahead 
    id="buildings" 
    multiple={true} 
    size={'sm'} 
    options={buildings.sort((a, b) => a.idNum.localeCompare(b.idNum))} 
    placeholder={CodeStrings.InvestigationOrder.ChooseBuilding} 
    selected={selectedBuildings}
    onChange={(option: any) => setSelectedBuildings(option)}
    labelKey={(option: any) => `${option.idNum} ( ${option.economicUnit} )`}
    emptyLabel={CodeStrings.NoResults}
    renderToken={(option: any, props, idx) => (
        <Token
            tabIndex={idx}
            option={option}
            multiple={true}
            disabled={false}
            onRemove={props.onRemove}>
            {`${option.idNum} ( ${option.economicUnit} )`}
        </Token>
    )}
/>

<Typeahead
    id="buildings"
    multiple
    onChange={(option: any) => setSelectedBuildings(option)}
    options={buildings}
    placeholder="Choose a state..."
    labelKey={(option: any) => `${option.idNum}`}
    renderInput={(inputProps, props) => (
        <TypeaheadInputMulti {...inputProps} selected={selectedBuildings}>
            {selectedBuildings.map((option: any, idx) => (
                <Token
                    index={idx}
                    key={option.idNum}
                    onRemove={props.onRemove}
                    option={option}>
                    {option.idNum}
                </Token>
            ))}
        </TypeaheadInputMulti>
    )}
    selected={selectedBuildings}
/>

[ericgio]

@MichalskiMaximilian sorry, I totally misunderstood your original issue. It looks like you're not including the CSS in your project, so the token is rendering incorrectly. Please see the section on including CSS in the docs.

[MichalskiMaximilian]

This looks pretty good and solves my problem. Thank you very much for your help and the quick responses.