IcRadio additional field with clickable element

[MI6-613]

When nesting a component inside a radio options additional field any clickable elements can no longer be clicked. This can be seen using this example.

import { FC } from "react";
import { IcRadioGroup, IcRadioOption, IcButton } from "@ukic/react";

import "@ukic/fonts/dist/fonts.css";
import "@ukic/react/dist/core/core.css";
import "@ukic/react/dist/core/normalize.css";

const RadioButton: FC = () => {
  return (
    <IcRadioGroup
      name="radio-group-3"
      label="Do you have any special requests?"
    >
      <IcRadioOption
        value="request"
        label="Yes, I want to modify my order"
        additionalFieldDisplay="dynamic"
        selected
      >
        <IcButton onClick={() => alert("hello")} slot="additional-field" />
      </IcRadioOption>
      <IcRadioOption value="none" label="No, standard please" />
    </IcRadioGroup>
  );
};
export default RadioButton;

This ticket is to allow for slotting additional elements in the additionalfield & allow then to behave as expected with regard to mouse and keyboard interaction. One thing to consider is what happens regarding the value assigned to the radio group, as currently the component assumes an ic-text-field will be there to take the value from and use on form submission. It may be the case that it needs documenting that if you slot a different element in there, you have to take responsibility for setting a value for the radio group when that item is selected

Also in scope for this ticket is an issue to do with using the arrow keys. When a textfield or date-input is present as an additional field & has focus, pressing arrowup or arrowdown will cause the selected radio option to change. This is particularly a problem for dateinput as it should allow you to change the values using the arrow keys. To resolve this, focus should only move in this way when it is the radio option itself that has focus

[MI6-613]

Looks like issue is to do with line 224 of https://github.com/mi6/ic-ui-kit/blob/main/packages/web-components/src/components/ic-radio-option/ic-radio-option.tsx

[GCHQ-Developer-847]

I have updated the code snippet in the ticket description to include the extra details mentioned in our discussion internally

Whoever picks up this ticket, it would probably be worth looking at the internal discussion, but basically the reason the click isn't working appears to be because of the use of stopPropagation() (which is there to stop the focus moving immediately to the parent radio option when the additional field is clicked).

[ad9242]

One possibility may be to change the swallowClick method to set this.skipFocus to true instead of calling stopPropagation(). This needs thorough testing though, as only a quick investigation carried out

Also need to consider what happens regarding the value submitted if a button, or some other element is slotted in, as currently it tries to read this from an ic-text-field. This could be covered in another ticket though

[GCHQ-Developer-847]

StackBlitz for the code snippet

[ad9242]

Stackblitz for issue with dateinput

focus the input field & use arrow keys to attempt to change date

[ad9242]

moved arrow key press issue into a separate ticket: https://github.com/mi6/ic-ui-kit/issues/2685