Broken react select styling for large values #4812
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #4812 +/- ##
=======================================
Coverage 96.55% 96.55%
=======================================
Files 748 748
Lines 25413 25413
Branches 3358 3358
=======================================
Hits 24538 24538
Misses 610 610
Partials 265 265 ☔ View full report in Codecov by Sentry. |
| @@ -1,8 +1,9 @@ | |||
| import classNames from 'classnames'; | |||
| import {useField, useFormikContext} from 'formik'; | |||
| import PropTypes from 'prop-types'; | |||
| import {useContext, useEffect} from 'react'; | |||
| import React, {useContext, useEffect} from 'react'; | |||
There was a problem hiding this comment.
we use the automatic jsx runtime, so the React import is not necessary :) (it's also not wrong)
There was a problem hiding this comment.
Ah okay, check. I'm also not sure why this was added... 😅
But i'll remove it :)
| return documentTypes.map(({omschrijving}) => ({ | ||
| value: omschrijving, | ||
| label: ( | ||
| label: omschrijving, | ||
| })); |
There was a problem hiding this comment.
isn't isPublished missing here?
There was a problem hiding this comment.
Oh shit, your right..
| @@ -25,4 +25,5 @@ | |||
| 100%, | |||
| var(--of-admin-select-max-inline-size) | |||
| ); | |||
| max-inline-size: var(--of-admin-select-max-inline-size); | |||
There was a problem hiding this comment.
I've had to do this in more places in other projects and now I no longer understand how clamp works
There was a problem hiding this comment.
Yeah i also dont fully understand why the max-inline-size was needed.. Maybe because a child element was growing, instead of the .admin-react-select. So that the max-inline-size prevent all growth?
I think the clamp just allows the parent to grow between a min and max value, but it doesn't work fully for flexbox child elements? That they don't respect the set value, and grow beyond? The .admin-react-select is used in a flex-wrap environment, which might also complicate things..
But I haven't checked/investigated it so deeply..
The .catalogi-type-option span element is only needed for the dropdown menu, not when it is the selected value. So the element should only be added when it's used in the dropdown menu. This also solves some styling issues when the content is beyond the max size of the ReactSelect
robinmolen
force-pushed
the
bug/4802-react-select-styling-for-large-values
branch
from
cd38d52 to
0db34e9
Compare
sergei-maertens
deleted the
bug/4802-react-select-styling-for-large-values
branch
Closes #4802
Changes
.admin-react-selectelement can't grow beyond its max-inline-sizeDocumentTypesandCaseTypeSelectselect option html labels with simple text labels. The html labels are now added as a custom Option component for the ReactSelect. This means that the html labels will only be used when the option is presented in the dropdown, otherwise the simple text label will be used.Checklist
Check off the items that are completed or not relevant.
Impact on features
Release management
I have updated the translations assets (you do NOT need to provide translations)
./bin/makemessages_js.sh./bin/compilemessages_js.shCommit hygiene