Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Fix type of 'title' prop in AutocompleteSection component #3911

Open
ProkhoDim opened this issue Oct 17, 2024 · 2 comments · May be fixed by #3959
Open

[Feature Request] Fix type of 'title' prop in AutocompleteSection component #3911

ProkhoDim opened this issue Oct 17, 2024 · 2 comments · May be fixed by #3959
Assignees

Comments

@ProkhoDim
Copy link

Is your feature request related to a problem? Please describe.

I've encountered an issue where Typescript says that providing a ReactNode type for the title property in the AutocompleteSection component is an error. But everything works fine when I pass a non-string.

Here's the error message:

Type 'Element' is not assignable to type 'string | (ReactElement<any, string | JSXElementConstructor<any>> & string) | (Iterable<ReactNode> & string) | (ReactPortal & string) | (Promise<...> & string) | undefined'.ts(2322)
collections.d.ts(45, 3): The expected type comes from property 'title' which is declared here on type 'IntrinsicAttributes & ListboxSectionBaseProps<object>'

Describe the solution you'd like

As a developer I expect not to see errors like this

Describe alternatives you've considered

So I propose to extend the SectionProps generic types with another one called OmitKeys, with 'children' by default (for backwards compatibility) and add another argument to ListboxSectionBaseProps - 'children' | 'title', to exclude the title: string type inherited from HTMLAttributes.

After this fix, the title type will be ReactNode only (which also includes string), and nothing will change in other places where SectionProps was used.

diff --git a/packages/utilities/aria-utils/src/collections/section.ts b/packages/utilities/aria-utils/src/collections/section.ts
--- packages/utilities/aria-utils/src/collections/section.ts
+++ packages/utilities/aria-utils/src/collections/section.ts
@@ -5,6 +5,6 @@
 /**
  * A modified version of the SectionProps from @react-types/shared, with the addition of the NextUI props.
  *
  */
-export type SectionProps<Type extends As = "div", T extends object = {}> = BaseSectionProps<T> &
-  Omit<HTMLNextUIProps<Type>, "children">;
+export type SectionProps<Type extends As = "div", T extends object = {}, OmitKeys extends string = "children"> = BaseSectionProps<T> &
+  Omit<HTMLNextUIProps<Type>, OmitKeys>;
diff --git a/packages/components/listbox/src/base/listbox-section-base.tsx b/packages/components/listbox/src/base/listbox-section-base.tsx
--- packages/components/listbox/src/base/listbox-section-base.tsx
+++ packages/components/listbox/src/base/listbox-section-base.tsx
@@ -4,9 +4,9 @@
 import {DividerProps} from "@nextui-org/divider";
 
 import {ListboxItemProps} from "../listbox-item";
 
-export interface ListboxSectionBaseProps<T extends object = {}> extends SectionProps<"ul", T> {
+export interface ListboxSectionBaseProps<T extends object = {}> extends SectionProps<"ul", T, 'children' | 'title'> {
   /**
    * The listbox section classNames.
    */
   classNames?: SlotsToClasses<ListboxSectionSlots>;

Screenshots or Videos

image
AutocompleteSection.title.prop.mp4
Copy link

linear bot commented Oct 17, 2024

@ritikpal1122
Copy link

assign to me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants