-
-
Notifications
You must be signed in to change notification settings - Fork 405
Description
Greetings!
After updating to the most recent version of react-tags (6.10.3), I started getting running into issues with the classNames when only a subset of the elements are specified, e.g.:
# used to work..
classNames={{
tagInputField: "form-control" ,
remove: "btn btn-primary py-1 m-2",
tag: 'react-tag'
}}
Now:
My first thought was to just put empty strings for the values I didn't want to override, but this leads to different errors due to react-tag's expectation of non-empty classes:
classNames={{
tags: '',
tagInputField: "form-control" ,
remove: "btn btn-primary py-1 m-2",
tag: 'react-tag', // adds class instead of replaces class as desired...
tagInput: '',
selected: '',
suggestions: '',
activeSuggestion: '',
editTagInput: '',
editTagInputField: '',
clearAll: '',
}}
Which causes problems when attempting to select an option via:
# Leads to: "Unexpected Application Error! Element.querySelector: '.' is not a valid selector"
const activeSuggestion = suggestionsContainerRef.current.querySelector(
`.${classNames.activeSuggestion}`
);
A work-around is to simply copy the default class names over and include them in the prop.
But the behavior should probably be changed so that classnames can be specified for only a subset of the elements, which is probably what most users want.
Unrelated to this issue, but it could also be useful, if it's not too difficult, to allow the user to indicate whether they want custom class names provided to be added to or replace the default ones.. Previously, I think they were always added, and now it seems like they will always replace them.
Thanks for all your work on this!
Cheers,
Keith