0

I have a Suggest component that is rendered out like this:

<div class="bp4-popover-content">
    <div>
        <ul class="b4-menu">
            <li>
                <a>
                    <div class="bp4-fill bp4-text-overflow-ellipsis">
                        <div>Some text</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

By default, it uses text-overflow ellipsis, but i want to switch it to bp4-text-overflow-wrap. How can I achieve this in React? What I have so far:

const ItemSelect = Suggest.ofType<Items>();

<ItemSelect
    fill
    items={newUserItems}
    itemListPredicate={filterItems}
    itemRenderer={renderItem}
    noResults={<MenuItem disabled={true} text="No results." />}
    onItemSelect={(item, event) => {
              setQuery(item.name);
              item.isNew = false;
              onItemSelect(item);
            }}
    popoverProps={{
            minimal: true,
            popoverClassName: `custom-class ${
                isOpenLine ? "open-line-popover" : "non-open-line-popover"
              }`,
            }}
    inputValueRenderer={() => query}
    resetOnSelect={true}
    resetOnQuery={true}
    onQueryChange={(q, event) => {
              if (event === undefined) {
                setQuery(q);
              }
            }}
    query={query}
    inputProps={{ inputRef: inputRef }}
/>
Owenn
  • 638
  • 1
  • 6
  • 23

0 Answers0