react-component / react-component/cascader
grid layout with cascader
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 233
- Forks
- 149
- Avg merge
- 10h 23m
- Merged PRs (30d)
- 2
Description
Parent element: <div className={relative gap-4 text-black grid grid-cols-${maxX} grid-rows-${maxY} w-full h-full overflow-y-auto overflow-x-auto}>
Component return:
return (
<Cascader
options={cascaderOptions}
id={id}
expandTrigger="hover"
className={z-10 ${className}}
dropdownClassName={z-50}
dropdownStyle={{ position: 'absolute', zIndex: 50 }}
onChange={(value, selectedOptions) =>
setInputValue(selectedOptions.map((o) => o.label).join(', '))
}
>
);
The tailwind grid layout does not work properly with cascader, Parent option displayed together with sub options, and arrows displayed one line after option.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the shown grid parent and Cascader component configuration, focusing on the parent and sub-option layout and arrow placement. Trace the Cascader rendering and styling entry points involved in this usage. Done means parent options and sub-options are separated correctly and arrows appear on the same line as their options.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100