From cc8023b54cd1d9069b9af0bc9207a707626eb849 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bed=C5=99ich=20Schindler?= Date: Tue, 11 Aug 2026 15:40:27 +0300 Subject: [PATCH] Support single child in `InputGroup` (#714) `InputGroup` crashed when a single child was passed because it called `children.reduce()` directly, assuming an array. Normalize `children` with `React.Children.toArray()` before resolving the validation state. Cover the `children` prop with visual tests for both a single node and multiple nodes, and make `InputGroupForTest` accept custom `children` while keeping the current composition as the default. --- src/components/InputGroup/InputGroup.jsx | 2 +- .../InputGroup/__tests__/InputGroup.spec.tsx | 2 + ...hildren-node-multiple-1-chromium-linux.png | Bin 0 -> 5819 bytes ...-children-node-single-1-chromium-linux.png | Bin 0 -> 3328 bytes .../InputGroup/__tests__/InputGroup.story.tsx | 30 ++++++---- .../__tests__/_propTests/childrenPropTest.tsx | 56 ++++++++++++++++++ 6 files changed, 79 insertions(+), 11 deletions(-) create mode 100644 src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-multiple-1-chromium-linux.png create mode 100644 src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-single-1-chromium-linux.png create mode 100644 src/components/InputGroup/__tests__/_propTests/childrenPropTest.tsx diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx index b65cb3a3d..2801a06d2 100644 --- a/src/components/InputGroup/InputGroup.jsx +++ b/src/components/InputGroup/InputGroup.jsx @@ -39,7 +39,7 @@ export const InputGroup = ({ return null; } - const validationState = children.reduce( + const validationState = React.Children.toArray(children).reduce( (state, child) => { if (state === 'invalid' || (state === 'warning' && child.props.validationState === 'valid')) { return state; diff --git a/src/components/InputGroup/__tests__/InputGroup.spec.tsx b/src/components/InputGroup/__tests__/InputGroup.spec.tsx index bc9d59b2d..974b09fa1 100644 --- a/src/components/InputGroup/__tests__/InputGroup.spec.tsx +++ b/src/components/InputGroup/__tests__/InputGroup.spec.tsx @@ -9,6 +9,7 @@ import { InputGroupWithCustomInputPropsForTest, InputGroupWithoutChildrenForTest, } from './InputGroup.story'; +import { childrenPropTest } from './_propTests/childrenPropTest'; import { validationTextsPropTest } from './_propTests/validationTextsPropTest'; import { validationStatePropTest } from './_propTests/validationStatePropTest'; @@ -17,6 +18,7 @@ test.describe('InputGroup', () => { test.describe('visual', () => { [ ...propTests.defaultComponentPropTest, + ...childrenPropTest, ...propTests.disabledPropTest, ...propTests.isLabelVisiblePropTest, ...propTests.layoutPropTest, diff --git a/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-multiple-1-chromium-linux.png b/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-multiple-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c925b6a55cd6fb824323a53061b3430edf8cae43 GIT binary patch literal 5819 zcma)=WmJ^m)`n?@9;DL&X`~cs$x%8a2UHqFx*0;6VSu4S=?0aSmJTUNC8QZzTBHT$ zdpSSPIzPTY?|PnDYt~cy-uJb4l#Z4%88IU<78VwnstQyW3kydE7|VljfN$bGDN`&g zFqSG*K_8yAmrV$x>A&iWj8mhVSEzx?*91S|3w;r`ba6q4ny|}A?7jDZUK1SKm*f!p z+zN%xMP|T+`=aq_!V1`Vp2_1W6sxB$rR=)Jes%KJ!h-DquzE(y&NGs+S1Kw{DD>I02n_>o?}pr5GgVchG7{#rl$4arO#l74 z`d`0(WstY{pC5z~Qna?Va%pC)@9zs#5)%>e3JPw{8yg!px-38Mhbc9A?HX!mXxzld z$HXYPxTU$i7UAXP-9~7zeGOM%Xz_`^JK+e*QOjYe)t5!ev&r}GW=|x=)Z}DJYHB>Q zP+k3xitbld1rG5Gy`wb>>lF$i4FK=)DbzpA)b#}@xg~rE^rSR$YT4M>ARr(>o}y1QGsP4F zA3c7YoSf{YHdFbUf>j0yXDLf9R)2r6*fKLYNxi?~eu0~vl?A6^G^;kp)@R;vu(Dd) z+(ek>GfPSN94v%}hI;SMDQtNkEJ(tS%>VN|6jKrv%R!jM>1nZt4@pBq`fsW_Zu#_m z;qcB71;?|!*}qdpW(v0UZ?BHfJwHn{!zx!E5)u-on;>Uf4%3Ns2tB~Ae`+> z87I2eUj9Njvz>A7F)}g|&yS~m{Kzv68y+5>oSKTiFBj(o>iqq)G?I*oYm%H%6zKw4 zj2H{Nxgs(EJ)Y*)jDTlfPzOxU&NGQS2mJX)m!SPh%gBfhEo*nLs{1}av+dirQSMFh z^iVvp{5YwxV6tbD|ItyTJyhM`)Fn#r&m7?&?@Tc#xT$hUYh7K+R9J)4Jo~`e@6y~j zdJ&vkBJ$_0qdIze$u9C^N4!YF!yFy{c25BZrEvqU`d8()E7yDb`>81@D@O_RN+1EN^d+GV^gom_IQ0~hu8t<>GneNS~ekjzj9)7o{dyHpKD=J<#b|-fJg!}qlUR@m*C00}jcsd*|wINIMUuC%} zrU(J*gN;H6#PDy4bVDFabK!mZ4ikV_fxvBboPC6(S|?)xk&yh`s~!6w>JX9gD_<$n z-NS<|gx|1ytW6d@1fE3m-rn94wj&u&u4AwP0f(utJyN~Pkc4C&CSU??ZtmNQzOc*|!QNf) z?8|!l)Y{s|4?$wKV>u)7_oX~}Qb@7o;gmAx-!xS@lAIU6cH!a^5?YA^E3>ho0WD^V zSRsa=8CAZDx>#y*TQjM*$IqUxccANzYPCmqM*xW%NY$VXr`azyH&>_K#!3j%-|WTJ z)nHcjR?!+0W@hF}(>8k>8+=T-tWwz4SZ;1|a!*kprDd!0qSUsYwKc~rzU;*cE>|o# zN6KqwEnaTZGD`06aQfqmLVCb0CS-V~Fq{csMD3d~lb0{ox)y7!lwnkE0t?U0%~yi4 zajkWg6Bs1up~Kd3k=1Bp%!v3hi1XjsewZ*+S=q?n3yLl%D1aD&h=%mL{1tG%@e7GL z&8=^3ZK2UG^!4#5B5U>a^D&`L7+56y^#~bSJ1>4T%96+DgFyY|b^mK+YZ1@v(_3!p&4mn1GDBO@`9GH42`6z~vE&f=WIAvPo(?WMmoZ&l}+QG7}$`!tT-a>*24a^-hN z0-qn1euF8xK$w}BWK>pGwzs!mSM5-S7bIk6W~QWY+;*)tHAw)Tkg?>a1da~9ZgXmQ z7i4cC;-KpJ!+wA5h|5!*ft4hhGf_pQ1{6WC%3<|+XlO{K2KgTA(!Zscmp1u!&>;Y) zIv@2hZ}_l^>h82LefLFFFZ7?Ws$ZY^0jCXxV-NE94cnbU?g&EuzX;-gPs1KLNcj5t z0tOy%&23rlg_xDXiojl$*3yo>gxWi^)u1a!(gyFr+M!l1lg%1KR5T*P%3}- z!DoZA;gJzzy;}csXW){Chc%vq$*ckEcF3u5ns2b`kF$C6=I>`*Lh>xRpqwYX^ps6t zStd_Ifv2-gZdOnz-UH-U*wx&49nD`C$#da!*4CB}ZfY|y;0@Gjm3hc0 zx&3{jC(W$M`^s5^-(V^paq{nG5tHe)ejSpaGM#nN%VDF|K}RafI_Hw`LYd#lXBx)1 zQYXwLz|TJqs1I=J(~}e1(X3`bxys7Q7Ft75QBg#sq|~92Xf#?TZF_BvikTUeBx2R~ z5LPW8K)mPai;A4l|WN(w>^+|IjgG7IZV7ujFcif-sV>6Fx0E*_-tMG*GQ@ zez^Qzt{ey^F)=YVw*2a9os!Q*MI4fn#kzL~@Au1b9#`|o zD{2d9t}OZ5=Bo|kX)jw=!)KTq3r@Vlfo4?OQ<$tBc|n+4SNAfbs?GNOt}sF_F0O-vgZuAJ5{rvD zC&}qd0G7!K zA~-INTz_O>z;0*q(?Trzw!`m~PZ5NVj}KfZ5ZzX~5lTgr$6-h*A>}+pJF;dAjRt@n zMBZi!Ti_tDl6OV`Jpgv*U}uNy_^O>Ni`3=e|E?uiSXii?B@yD0A0hGlRfJ?gX(@Lf zB!%cE008s(x=()jxCC5%YXGdcN`4q9iS-5(hm>S|ek+a3LUwwcB)4Yzm^_=(o>J`9 z?mi|g2((P*9)NMzD5%}aP0yaHiii6IH|LZ*UrN5$@{XJRM;WU3cY1Puklt0gEiKKt z@OW6rzp6&er}X5Bz>YXX3vSO=b`!GaR(f=3X`yJ@r$Zv1ajv!^C++Limx-zz6das! zg?y5A6-_&d-yH^yZmRa$ovvy<9s=m=LNJ^UAV*$aqGnDyIy%%F)cuQE;90CzUbn(u zw9jhGUg8y!yW{T?Xp33)g6bsSU3r@B?(9TQ0G?-5)a&TvbXS&?mGS@VrsqZJ1h_Jx zn8dY|l-7jYuW*PVqP+N#hYvsxcv=UJm^$TXPZwCB& zHf#ly5_YjOmdqB!$lF4Hl$|d#Y1D%BX)NshtS}5)^%LE}H|{OE=`EZ7+M~2gfd{0M1LnE_LSWu9sJI;5eQKQpc2J^uAbd=`4 zK0vwdKuFHaV|6i3I6z_a5Q_?zawEhcC@6@8goKB-VZPBNep0BFvU?LOr_lf(Lr0s_ z=Cdn?HK8wqABl@c7X6W9uq8+PIEUpeyV?R3Oo(Z;|2jI3`!>*{FA4p{Cl6mrI1RLs;|)Zgj-!^YIoW(&y)lg{J1a`*;D= zY&{&cM-&Pa!{CV5C|G-bNeQA$uVvUZ2JtCZ2WJ@(997L9=Wm{3$kfhl%INyH^UVq` zMOYl62+ntqlR}NTvH8!4mu1ZgJQN5DH^)o9-h1Zp5Zn*BY)z3-)O2Ea3m5Fdw&5B7UNz3R?G z=S`_Yv-CEm{i)xH9T2jsF^aO6|8RkPH;hb+bqRQM8yU+=@YSI|Hp^o6WkKN+$E~ip zF|~ogs(`fQw)7NTUDFWK>E>;TJz2ghey`|{dDScIhpKOlZ6eYTQV#Yz{3ahb*wt96 zslzX`b&v^9*_rf8G$_@CQI~u1H}4)AkeF#B39(H!ITNJ*`0HA8&76!>zh~v4QiOrJ z6qvv{lVzF+tG%zg>ZRJhs4gY(iQ_MtfV^z9Oo@QeEr0-j)6jy%vf@-RB@X;R1YI zgA0IuS2!T|5D3JtK!qh)paLTCIUSWgTxpN6?4n^i>MYBvS4?0Aq%I7BbPjyn`OYJ= z-5>Q{_dBQXU|8X5KAhZ=2DwR8D@9&TU*gvt9J)_sh+AOgYSNu3L2xW&-HJ@pFnY?8 z+w3yNe9>qleg4>Eh>tJ%_;V=C_*s0*E~eS8GcUCy3T?K@+Mscno^xvdCT~U!msez( zXXOWw755-EWuPyilTuuFRF=u@-* zz;R15Lxz~+Z|29)3Pi`m^wfE-^~D}Jsi!@(fPN=PXN7{4QS>38%mBvI<IxKOQI$ zP%NffD7wO0_Ve=cqEttR zz)?I!LHm1q=B+@Ngjbf;l!;z?=-x|i4885bpwAMjorO&38^@@0VB!^bY9#SY(($S$IHR!eQS#L~=FfJJdMZZelQJM=l9;-=wAT=N*7qUYk z6Ad>8XQ?S2?n`xz41{nf7N zz@m9dXxzMaxt%w~7%0g8v@D0@;M=-T?)-<|hp!S*mQh_`MhVwE4K{+Ym98)csb_k6 zdbiX-Y0@<^mTYj`c>=kHn31F3ezX*MYhE~N1r90y^qJC#!vs_~{qW!99WhHPx9O9|vRPx$pkd8eHe1cj{p?Bqb#^J3D*VQGuA6JDQ2~m40bx@HREg zIpVj+%g+Nk3`5tXAHIH-B4$wFkvKm0R<58u=hA+vd74^9)`idw3=H)3m6RnRCf=qY z2w%mCN>briy}!#ZAn?r*)zJ_Op{Bd^|7U7@7LNPoQM5_;PkDVXQ0Gmlw(Mk6U~sXp mFc{i=BUhjWO>pNoxL9x4Ei`zhEeL^MuvDLEK`Rx_L;nxDN&F%J literal 0 HcmV?d00001 diff --git a/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-single-1-chromium-linux.png b/src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-single-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f3c08c0588ab5a5628a5dc1b19b0c368310f1734 GIT binary patch literal 3328 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 literal 0 HcmV?d00001 diff --git a/src/components/InputGroup/__tests__/InputGroup.story.tsx b/src/components/InputGroup/__tests__/InputGroup.story.tsx index c1c3b1b1b..bd6f6ed27 100644 --- a/src/components/InputGroup/__tests__/InputGroup.story.tsx +++ b/src/components/InputGroup/__tests__/InputGroup.story.tsx @@ -26,20 +26,30 @@ const options = [ }, ]; +const defaultChildren = [ + , + , +