Allow to pass className to List and Item

[dapicester]

I use bootstrap for styling my app and it would be great if I could pass a css class for:

• the <ul> element in the List component (in addition to the rta__list class)
• the <li> element in the Item component (in addition to the rta__item class)

[jukben]

Hi @dapicester 👋

Thanks for a feedback, good idea. Are you interested in making a PR for it? If not I will take care of it. 👍

[dapicester]

Hi @jukben, I justed forked the repo, let me see what I can do ...

[jukben]

Cool! 💪

You can use logic similar to this you just need to extend propTypes for Item, List, and Textarea and pass the correct props to components themselves.

I propose naming classNameList, classNameItem. It would be nice if you could pass className for Loader too something like classNameLoader? What do you think?

If you will have any question just open a PR for this and we could discuss it there.

[dapicester]

I already wrote some code into my fork, not ready yet for a PR, as I haven't written any test yet, but enough to play with it with the dev playground.

But I am stuck with the bootstrap style, if I add dropdown-menu to the list then the autocomplete is rendered but not visible. I'll come back to this later ...

[jukben]

@dapicester It will be probably something with bootstrap styles. If you figure it out, please share your solution, I could be handy for the others.

[dapicester]

Hi, yes it was some bootstrap thing, so as a workaround I just copied the style I needed and adde to my CSS:

.rta__autocomplete {
  z-index: 99;
}

.rta__list {
  border-radius: 5px !important;
  overflow: hidden;
}

.rta__entity {
  padding: 3px 20px;
}

.rta__entity--selected {
  background-color: #337ab7 !important;
}

You know, I prefer to avoid !important but I had to go ahead on my tasks. I hope I can come back to this and make a PR later ...