Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

docs: fix refs type error in Basic Drawer component usage#1279

Closed
ryohidaka wants to merge 1 commit intochakra-ui:mainfrom
ryohidaka:main
Closed

docs: fix refs type error in Basic Drawer component usage#1279
ryohidaka wants to merge 1 commit intochakra-ui:mainfrom
ryohidaka:main

Conversation

@ryohidaka
Copy link

@ryohidaka ryohidaka commented Dec 7, 2022

📝 Description

This PR prevents type definition errors when using the Basic Drawer Example.

⛳️ Current behavior (updates)

A TypeScript type definition error is detected when using the existing Basic Drawer Example Code.
This is not a problem in working, but if you have set restrictions at build time, such as with ESLint, you will need to use @ts-ignore or other means to deal with the problem.

Here is the error when opened in VSCode.

スクリーンショット 2022-12-07 22 32 48

(property) ref?: React.LegacyRef<HTMLButtonElement> | undefined
Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLButtonElement> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLButtonElement>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'HTMLButtonElement | null'.ts(2322)
index.d.ts(138, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & OmitCommonProps<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ButtonProps> & ButtonProps & { ...; }'

スクリーンショット 2022-12-07 22 33 03

(property) finalFocusRef?: React.RefObject<FocusableElement> | undefined
The ref of element to receive focus when the modal closes.

Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<FocusableElement>'.
  Types of property 'current' are incompatible.
    Type 'undefined' is not assignable to type 'FocusableElement | null'.ts(2322)
index.d.ts(115, 5): The expected type comes from property 'finalFocusRef' which is declared here on type 'IntrinsicAttributes & DrawerProps'

🚀 New behavior

By specifying current, the corresponding type definition error was suppressed.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

This may be a temporary fix, but we would like to modify it so that it is not boring for beginning students who use Example.

Best regards,

@vercel
Copy link

vercel bot commented Dec 7, 2022 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
chakra-ui-docs ✅ Ready (Inspect) Visit Preview Dec 7, 2022 at 1:42PM (UTC)

@segunadebayo
Copy link
Member

segunadebayo commented Dec 12, 2022

Hi @ryohidaka,

This is not a fix for the issue. Accessing ref.current immediately in the Button element leads to its value being undefined

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ryohidaka @segunadebayo