Skip to content

Unable to specific class names to a subset of elements for the classNames prop following recent TypeScript changes #983

@khughitt

Description

@khughitt

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:

2024-07-21-134439_1032x198_scrot

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions