Reputation: 2712
I have check box component with onClick func and onKeyPress func
The onCLick work good . but my onKeyPress make some problems.
When I Press Space i get an onKeyPress Event the return e.target.checked as true -
But when I press enter I get e.target.checked as false -
My component pretty straightforward :
import React, { forwardRef, useEffect, useState } from "react";
import Root from "./CustomRadioButton.style";
import PropTypes from "prop-types";
const CustomRadioButton = forwardRef((props, ref) => {
const {
name,
label,
className,
id,
onClick,
register,
onChange,
defaultChecked,
ariaRequired
} = props;
useEffect(() => {
console.log(checked);
}, [checked])
const [checked, setChecked] = useState("");
const hadnleClick = (e) => {
return setChecked(e.target.value);
};
const hadnleKeyPress = (e) => {
console.log(e);
if (e.code == "NumpadEnter") {
e.preventDefault();
return setChecked(e.target.checked);
}
}
return (
<Root.Wrapper className={className} onClick={onClick} onKeyPress={hadnleKeyPress}
>
<input
type="radio"
name={name}
id={id}
onClick={hadnleClick}
value={checked && checked}
onChange={onChange}
aria-required={ariaRequired}
defaultChecked={defaultChecked}
{...register}
/>
<label htmlFor={id}>{label}</label>
</Root.Wrapper>
);
});
CustomRadioButton.propTypes = {
/**
* ariaRequired
*/
ariaRequired: PropTypes.bool,
};
CustomRadioButton.defaultProps = {
ariaRequired: true
};
export default CustomRadioButton;
where is my mistake?
UPDATE
I moved the onkeypress to the input still dont work
add my css mayde is the problem
input[type="radio"]:focus + label::before {
border :1px solid black;
}
input[type="radio"]:checked + label::before {
animation: ${checkedAnimtion} 250ms ease-out;
background: #3cbfed;
box-shadow: inset 0 0 0 5.5px #fdfdff;
}
Upvotes: 0
Views: 333