diff --git a/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx b/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx index dcc493f699..f4f9ddbabf 100644 --- a/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx +++ b/packages/react/src/component-tests/IcRadio/IcRadio.cy.tsx @@ -207,7 +207,7 @@ describe("IcRadio end-to-end tests", () => { cy.get(TEXT_FIELD_SELECTOR).eq(2).should("be.visible"); }); - it("should call onclick function of component in additional-field slot when slotted component is clicked", () => { + it("should call onclick function of component in additional-field slot when slotted component is clicked and not lose focus on arrow keydown", () => { mount(); cy.get(RADIO_SELECTOR).eq(0).find(".container").click(); cy.get(TEXT_FIELD_SELECTOR).eq(0).click(); @@ -216,6 +216,8 @@ describe("IcRadio end-to-end tests", () => { HAVE_BEEN_CALLED_WITH, "Textfield clicked" ); + cy.realPress("ArrowDown"); + cy.get(TEXT_FIELD_SELECTOR).eq(0).should(HAVE_FOCUS); }); it("should emit icChange and icCheck events when radio option is selected", () => { diff --git a/packages/web-components/src/components/ic-radio-group/ic-radio-group.tsx b/packages/web-components/src/components/ic-radio-group/ic-radio-group.tsx index c8334afe38..69c6b5eeac 100644 --- a/packages/web-components/src/components/ic-radio-group/ic-radio-group.tsx +++ b/packages/web-components/src/components/ic-radio-group/ic-radio-group.tsx @@ -228,6 +228,20 @@ export class RadioGroup { } private handleKeyDown = (event: KeyboardEvent): void => { + const additionalFields = Array.from( + this.el.querySelectorAll('[slot="additional-field"]') + ) as HTMLIcTextFieldElement[]; + const activeEl = document.activeElement; + if ( + additionalFields.length > 0 && + this.radioOptions.map((el) => + slotHasContent(el, this.ADDITIONAL_FIELD) + ) && + additionalFields.map((el) => el == activeEl) + ) { + return; + } + switch (event.key) { case "ArrowDown": case "ArrowRight":