HTML ID Conflicts in Facet Items Due to Case Sensitivity

Created on 12 July 2024, 6 months ago

Problem/Motivation

In the current implementation in 2.0.x, generating IDs for facet items can lead to conflicts due to case-sensitive edge cases. This results in invalid markup since IDs must be unique within an HTML document. Consequently, this leads to rendering issues and unexpected behavior in the frontend.

Here are some examples:

First Example: Organization Name Facet:

Facets Displayed (as checkboxes): "test," "TeSt," "Test," "TesT"
Generated ID on the input tag: "organization-name-test"

Second Example: Organization Name Facet:

Facets Displayed (as checkboxes): "ABC Company," "abc company," "Abc Company"
Generated ID on the input tag: "organization-name-abc-company"

The root cause of the problem is the use of Html::getClass(), which converts all values to lowercase. This transformation leads to conflicts when incorporating $result->getRawValue(), resulting in non-unique IDs.

Steps to reproduce

Create a facet for "Organization Name" or any name you wish.
Add content items with case variations, such as "test," "TeSt," "Test," and "TesT."
For the Facet, display as Checkboxes or Searchable list of checkboxes
Go to the page where the Facet exists
Inspect Element and observe the generated IDs on the input tags, which will be identical: "organization-name-test."
Select "TeSt" and confirm that it always checks the first checkbox "test" because that's the first instance of "organization-name-test." The facet may take you to the filtered/facet results, but try to observe the checking of the boxes.