maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: visual glitch with autocomplete component (#20611)

Browse source 
* fix: add display:block style to span and correct minor typo

* refactor: change posisiton and max-heigh on scss

* refactor: adapt message with conditional

---------

Co-authored-by: Mac Siri <mac@forem.com>
This commit is contained in:
Ian Lourenço 2024-03-04 16:47:32 -03:00 • committed by GitHub
parent ed584ff5dc
commit bb6954bfb6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/components/autocomplete.scss
View file

@ -83,8 +83,8 @@
}
.c-autocomplete--multi__popover {
position: absolute;
max-height: 500px;
position: relative;
max-height: 200px;
overflow: auto;
width: 100%;
padding: var(--su-1);

6
app/javascript/crayons/MultiSelectAutocomplete/MultiSelectAutocomplete.jsx
View file

@ -649,9 +649,9 @@ export const MultiSelectAutocomplete = ({
</ul>
</div>
{showMaxSelectionsReached ? (
<div className="c-autocomplete--multi__popover">
<span className="p-3">Only {maxSelections} selections allowed</span>
</div>
<span className="p-3">
{`Only ${maxSelections} ${maxSelections == 1 ? 'selection' : 'selections'} allowed`}
</span>
) : null}
{suggestions.length > 0 && allowSelections ? (
<div className="c-autocomplete--multi__popover" ref={popoverRef}>