question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Please support forwardRef or options for Dropdown component

See original GitHub issue

What problem does this feature solve?

Dropdown should supporting forwardRef to use ref in this component. Adding this feature allows us to be able to trigger a onMenuClick by clicking to custom menu with dropdownRender prop.

What does the proposed API look like?

const myRef = useRef(null);

<Dropdown 
    ref={myRef} 
    dropdownRender={(overlayNode, triggerMenuClick) => (  // or also can provide triggerMenuClick here to instead of ref
       <div className="my-custom-dropdown-without-menu-prop"> // using custom dropdown without menu prop
             <a 
                 className="item-dropdown" 
                 onClick={() => myRef.current.triggerMenuClick}  // trigger close dropdown after clicking
             >
                    React
             </a>
             <a className="item-dropdown">Ant Design</a>
       </div>
    )}
    {...props} 
/>

Hope AntD team will reproduce it by what i provided in next release version

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
afc163commented, Nov 30, 2022

Please control visibility by open and onOpenChange.

0reactions
phatifycommented, Dec 1, 2022

@afc163 Can you reopen this issue?

Read more comments on GitHub >

github_iconTop Results From Across the Web

React - Passing a ref into a component which uses ForwardRef
I have tried swapping out the React Select for another component and I get a similar issue so I think this is a...
Read more >
TypeScript + React: Typing Generic forwardRefs - fettblog.eu
Providing types for React.forwardRef is usually pretty straightforward. The types shipped by @types/react have generic type variables that you ...
Read more >
FAQs - styled-components
Commonly asked questions about styled-components. ... forwardRef API and new context APIs if you wish to try and polyfill for older React version...
Read more >
Accessibility - React
These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React...
Read more >
forwardRef/createRef - React TypeScript Cheatsheets
Option 1 - Wrapper component​ · ClickableListProps<T> = { · : T[]; · onSelect: (item: T) => void; ·?: React.Ref<HTMLUListElement> | null; ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found