[SOLVED] Not able to handle change/click on inner elements (displyed using onRenderField) of ChoiceGroup in office-ui-fabric-react

Not able to handle change/click on inner elements (displyed using onRenderField) of ChoiceGroup in office-ui-fabric-react

I have to handle click or change on inner elements in radio button (ChoiceGroup) in office-ui-fabric-react. In the below example, I want to click on the link but am not able to. As per my understanding, we can display the JSX element inside onRenderField of the option (of type IChoiceGroupOption). I am able to render correctly but not able to perform any action on that. Do I need to override the click of the radio button? How?

const {
    ChoiceGroup,
    IChoiceGroupOption,
    mergeStyles,
    Fabric
} = window.Fabric;


const ChoiceGroupCustomExample: React.FunctionComponent = () => {
    return (
        <ChoiceGroup defaultSelectedKey="B" options={options} label="Pick one" />
    );
};

const optionRootClass = mergeStyles({
    display: "flex",
    flexDirection: "column",
    alignItems: "baseline"
});


const options: IChoiceGroupOption[] = [
    {
        key: "A",
        text: "Option A",
        ariaLabel:
          "Mark displayed items as read after - Press tab for further action",
        onRenderField: (props, render) => {
            return (
                <div className={optionRootClass}>
                    {render!(props)}
                    <a
                        href="#"
                        onClick={() => console.log("SSSSSSSSSSSS")}
                        style={{ marginLeft: "25px" }}
                    >
                        SHUBHAW KUMAR
                    </a>
                </div>
            );
        }
    },
    { key: "B", text: "Option B" },
    { key: "C", text: "Option C", disabled: true },
    { key: "D", text: "Option D" }
];

const ChoiceGroupCustomExampleWrapper = () => (
    <Fabric>
        <ChoiceGroupCustomExample />
    </Fabric>
);

ReactDOM.render(
    <ChoiceGroupCustomExampleWrapper />,
    document.getElementById("content")
);

<script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
<div id="content"></div>

You can find the code on this codepen.

Solution

you can just set the z-index of the link to a high value so that it's on top of the input element

<a
  href="#"
  onClick={() => console.log("SSSSSSSSSSSS")}
  style={{ marginLeft: "25px", zIndex: 100000 }}
>
  SHUBHAW KUMAR
</a>