Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
MultiSelectionFilter's accordion IDs incorrectly use labels
Description
Checkbox filter-sections in MultiSelectionFilter appear to use a label prop to derive the id attribute of their section accordions. The label is a FormattedMessage, however, not a string, and this results in element IDs such as [object Object]-1.
For example, see the "Patron group" accordion of the main ui-users page.
Per @Yurii Danylenko This bug appears because filterConfig, passed to SearchAndFilter component, provides <FormattedMessage /> as a label. As a solution we can replace FormattedMessage with translation keys and translate label before passing to SearchAndFilter component. This should be done in all UI modules that use filterConfig. Link to PR for ui-requests https://github.com/folio-org/ui-requests/pull/326
Hi @Zak Burke, seems like this is no longer an issue in Search app
Zak Burke April 11, 2019 at 3:48 PM
It's low/zero impact on the end user, but it is technically a syntax error (ID elements may not contain whitespace, and must be unique) though most browsers swallow the error without issue. It is a potential testing issue as it will prevent a test from having programmatic access to that element.
Additionally, this is probably a prop-types failure spewing warnings across our console, but the console is so polluted by redux-form at present that it's impossible to see. We have defined, but not assigned, the work to address that in https://folio-org.atlassian.net/browse/STCOR-353#icft=STCOR-353. The eventual goal is a warning-free console. We used to have that stated somewhere; I spent my first summer on folio working toward it.
Checkbox filter-sections in MultiSelectionFilter appear to use a label prop to derive the
idattribute of theirsectionaccordions. The label is aFormattedMessage, however, not a string, and this results in element IDs such as[object Object]-1.For example, see the "Patron group" accordion of the main ui-users page.
Per @Yurii Danylenko
This bug appears because filterConfig, passed to SearchAndFilter component, provides <FormattedMessage /> as a label. As a solution we can replace FormattedMessage with translation keys and translate label before passing to SearchAndFilter component. This should be done in all UI modules that use filterConfig. Link to PR for ui-requests https://github.com/folio-org/ui-requests/pull/326