Merge pull request #2875 from mi6/2685-ic-radio---using-arrows-keys-i…

…n-additional-field-input-changes-selected-radio

2685 ic radio   using arrows keys in additional field input changes selected radio

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(<ConditionalDynamic />);
     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", () => {

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":