yanir midler
yanir midler

Reputation: 2712

onKeyPress return e.target.checked as false

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 -

enter image description here

But when I press enter I get e.target.checked as false -

enter image description here

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

Answers (0)

Related Questions