From f15b62a9ca9a817d2252753d31025d431ac9f8e2 Mon Sep 17 00:00:00 2001 From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Date: Mon, 29 Apr 2024 10:32:12 -0400 Subject: [PATCH] fix(select): options are visible with fit-content width and fill outline (#29408) Issue number: resolves #29321 --------- ## What is the current behavior? When using a select with `fill="outline"`, `interface="popover"` and a width that fits the content of the options, the select options are not visible. The hidden radio is covering the text of the radio text options. ## What is the new behavior? - Select options are visible and no longer covered by the hidden radio container ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev-build: `8.0.2-dev.11714165638.13e7dd5b` Reproduction (issue): https://stackblitz.com/edit/angular-mndtkr Reproduction (with dev-build): https://stackblitz.com/edit/angular-mndtkr-d7wsnp Reproduction steps: 1. Open the select 2. Observe: The popover displays the options, but the options are not visible/readable to the user 3. Use the dev-build 4. Open the select 5. Observe: The popover displays the options and they are visible/readable to the user (5, 10, 15). --- .../select-popover/select-popover.md.scss | 6 +++- .../components/select/test/fill/select.e2e.ts | 33 ++++++++++++++++++ ...fit-content-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1353 bytes ...it-content-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1346 bytes ...fit-content-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1095 bytes 5 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/select-popover/select-popover.md.scss b/core/src/components/select-popover/select-popover.md.scss index e2162c1d7d..001b012363 100644 --- a/core/src/components/select-popover/select-popover.md.scss +++ b/core/src/components/select-popover/select-popover.md.scss @@ -2,7 +2,11 @@ @import "./select-popover.md.vars"; ion-list ion-radio::part(container) { - opacity: 0; + display: none; +} + +ion-list ion-radio::part(label) { + @include margin(0); } ion-item { diff --git a/core/src/components/select/test/fill/select.e2e.ts b/core/src/components/select/test/fill/select.e2e.ts index 99fd3c2393..350c0b847a 100644 --- a/core/src/components/select/test/fill/select.e2e.ts +++ b/core/src/components/select/test/fill/select.e2e.ts @@ -237,4 +237,37 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co await expect(notchCutout).toBeHidden(); }); }); + + test(title('select: fill outline: fit-content should display select options'), async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29321', + }); + await page.setContent( + ` + + 5 + 10 + 15 + + `, + config + ); + + const select = page.locator('ion-select'); + const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent'); + + await select.click(); + await ionPopoverDidPresent.next(); + + const selectPopover = page.locator('ion-select-popover'); + + await expect(selectPopover).toHaveScreenshot(screenshot(`select-fill-outline-fit-content`)); + }); }); diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6c035705afdffb2f887119431cb79886dc87b27c GIT binary patch literal 1353 zcmbW1{a2C)6vrP@8%d&Od5}<08@1+gGuJ$o6-tzb`PQkhM+;JHm5N6^X%LozKAehN zuQmitZDl58mYQOQx;;8JwH#6rONK;>Mv5t>>G%)!^25EKAHMgO`?=>_Va)CwF3wnI z003Mfc9P@lB-yJRx!B(0EeM7kh^)9BVSua$Hw*wy4iRM1o}AJ#UEQvg88~=6TCvH$ zD)OtVRX5PhY&XLni$UB-AK}4S$;PUXY!-`^8MMGp7hI)=`MNkMm32 zF*oHcJQfyNL;W>;Mjdj_YJ4O9E`#7#Qd-(MI9M($%E)7sgX>lU_7#M%fkC^<@1W-{ z%(vPT4#mw`ke?jnH8Wv63qeh?FJ19lF7FQ@s*kEWzj*nhJD*uAm!p6g+xX#@-SoQ+ ztu!nay9j8KX=U*k6|&uG>ir?|CRQ{yItl=VMMY7i6|L88Ss&l)3;1Eaw1k9>*q%DU*sPA-%$cuShPprFH=(+e75qqV+|c0;R?<)n#18>aJbIN$>5K( zvr(@4>Gj{tn&Auhiz?&LaQ`iawt*TImDmz}Bc|A{qHaGmuKF^$GS)6{;)8jgM|e}L z{T{?6eOS~(SF;Y`M)9G|w$w9}|!NRm4| zdANejGojkYw2gF{CmM~$idtkSII~ZyHN#&gyg}s~LNH!l%3IN8SW!lLI)lw#o|q^( zWf;-ENM$mMRmS&IV+Ss)Qj+UwL)KgccjlSg_d(C(vGkhhB~nxO=;+-Lkw4IxiMuY5 ztmw5;UGR1rltBG${^M4& zH<`?+D`B5Fv1`?`?`_rUqr}2-c&6b`-!9HJ45>scE-*KDG3z1N5M}Wg3MFu9meZ## z2>M+6^E+|XjzG@D(2|O$Ye0=4O}n2)Q`V>U&S5G2T#gX8a%DL2lG4;$78~FhyY@=) z&Q-Y}g~Tp`h8n)9zdZjXH(b6t_I-JT5x4-5?4Qz*_A6gV7D zOQZ96KHbU7gyeQPJ-Bz$YTl>em%l^kXZI`+-XWA9&~s~Q|AmI^#QBB#wudKMMKWd< zH2;%GBs#Qj?FtYC2jA&hyvsHiQl%z(ULGEXVcU|5n3tZb2gOh9zY&PozMCuyJCy%7 D#`Sc^ literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..98aed59c1c81de0673b332a5795665e61228a7ac GIT binary patch literal 1346 zcmeAS@N?(olHy`uVBq!ia0vp^jzGMCgAGUqzh_KhU|{9+ba4!+h!KeD3@I`1s#%{{A|@nT^eT&fa-@uYG>=cVG72(_jAl$@%#CbMyZF_C9LD zdyeXeai2*uwzIQKsH&~q%EHE0)%{+tZr|R$2fuv%n)-1WM}eE8OUub$haYWC{ILBo z%Rw#{M+J`iKM!~)aP+Y3)-aNt!RN!itod=Uk!9l?2R{Y%3Bq%(@p<&9xCtqDPCVj~ zR1zDu%qn9g-^Y(1Ev&7J8-M=&E1T5roqAbEsHv$bASkHm%a#O93J82iK5&7hrMH(iB|TkP zRh9Mk@86ex?%8AGCzSJ)=isJP*Bh?Z=T$fCr=V8D{opm z2*jPb8{7V??ccw;EnBuc`0_=>$uh*uSLxu~W_5LS4>(;G+h=`7tFEf`i3WzWFwCbqevUhLqw{K-Dc^0v)+Ob1|nVFe`kMEnD zz?AP_;`IVH1H;x{l2O<4q59(kB?&4u$MuyP6%2&l#GEThurdIKcprcH6P6+-aEKRF zJykWFB;g4O@r$LVQ(ifgF0cxaUBMT^zN-25T_-OU)k#90ol9J*f|S00`(|Kf#`c;q zY{vZg<%y3TK1}4{<9qb$mz1HQVMb2Ql+-%6*=nygY}nASZk=97R(X7UeB>U@Q~zXh z%gV%_K7D%WD!omb9RDqFY+pGH#A*i_a=pCGXn3`{I==DdiDYEXztt9z1<| z^ujv{U<7Hyaxp3r)FwJKDv~t;(FEyu92fsK+Q)>EJaDwOfrYKW^vL)Wl3$so?Io z%x$Kg0!NZa>%F;i=Vs*QZvCwl)lyYmooFk2MdSa|@2{Aeek|(g;ra37M?!Y?>316x z0zb~okTSef!kk!G7&z_!_3PJ9+i_eJRGud{ecH5ukdPD=wqLGIABsv!L~3hmckJ3V z>8`=qvu8IopUb#xBh*v&!hhdm|Mp_HQgbDsVRBdPVKMa`@<{QTJjWD*f2Yp3xv#L zTqw<d)i-6@adA;0^3Cr~N|)5t z@lD>^bVR97thc*+^793i-JQ-KSs2nbOV%@H{`51S)tJHuEE^d-UHx3vIVCg!05_9d Ap#T5? literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..013d9fe740accb0724c14bc035cf6084c913d2be GIT binary patch literal 1095 zcmeAS@N?(olHy`uVBq!ia0vp^jzGMCg9%99>78Z@q}Y|gW!U_%O^81F#qv% zaSW-L^Y-pW@7E482R?d#KDBk*mhMMSlIHwjwpy{Ex%tK}O^c4Ew-=5!)HgoJa2Nc{ z&Jo5EtHs5*)q-PP(+Z0&M;1|?wVkHl+deqOZ%tTt{n_>Jb@N|Vx>nzx;bQRJZ)J?0 z_aqn1sVbc%BFAQ=MsCYxmq=b1u;MWjhvK<~={=s?a?6t%x((F~kNuhFwwbBU-+>{g zfl)f)0Gq@HMmBWjkA7(p*NOka)`lHD_vU%s$J$wm65QO}%F4>`I&@AqEqfyS`Q6W- zGX;V)L@eyKi&mUdJ#4_CSX)~=Ep_HH%^wS@j$i)p;e!Lm$rPi91v^%+)}HERYirv% zZw9*!@6{|*vF_g9-nZ}HuV1s~#jbgN%UjQ%Vcr*fVO#F^``OvqEfaR{wsu^;J$=si zYq#RRFAvgmI`Q@E)(Od{8kax(@#Dv%M~m_<9Iw{)Km6`pp4#NZdbyZ6^X7R?GO@7G zC`pPdm{UJ}`t&K6e*UbCy>4!9{`ljMJ9p;1n0$x%T=uRA9X@`3ccqE%-o48)i`JTY z#P76l%`{eKvjYvh1_{hOHyDUv9=KmnSGRA+4hw7RX!Cvh_N~+4T3V8jkdU0bc<0N% zJjaVq)Y!eZ>7ABpIn(FbzAam~x^hIu#o1X{1cXi%m~{U6QJcRxJzkd{g(!5PW58C|5SS-@3d4wr>27otRLyP zWPXj>Ty`fq`tScHSF->wPQ~}{-@ohlJh$*zw0nxPjU0cgQ-6Q|yN*POi5@Cay<9cZ z*SnapFg3a;J-ipeskm#Mx)5h${zu(&rn`Dqtg^DT-MeLriK%I6MMZ>;*!OSWj_f;X zK5M7p^}jU*8MCh4zc0_jChB_8WbMrL|DAW#abhGe?8y!$>iFl^(r@`^k9^K42Zlgt z>DO1UyrwawcCr<(s!nbeRHlJE`?euByr9m@i&h%89thDUAvJLO7 zWu{dt%d*vuMXV0bvS5k7yf5dh%8rBc*Up?3neyRnR6EdYm4DBje{W9{y7S=lHJ>Kw zKR0KsoGJYA^;Z!0(fXG_6)mr)