Cannot use IntelliSense for Select component

[abdullahtellioglu]

Describe the bug

Select component type seems like ForwardRefExoticComponent<unknown> where properties are not accessible through IntelliSense. IntelliSense works for other components such as NumberField, TextField but does not for some.

TextField example:

Select example:

Expected-behavior

Props should be defined for Select component.

Reproduction

Any react component with Select would work.

function AddressForm(props: { street: string; city: string; zip: string }) {
  const { street, city, zip } = props;
  const items = [
    {
      label: 'Most recent first',
      value: 'recent',
    },
    {
      label: 'Rating: high to low',
      value: 'rating-desc',
    },
    {
      label: 'Rating: low to high',
      value: 'rating-asc',
    },
    {
      label: 'Price: high to low',
      value: 'price-desc',
    },
    {
      label: 'Price: low to high',
      value: 'price-asc',
    },
  ];
  return (
    <>
      <TextField label={street}></TextField>
      <TextField label={city}></TextField>
      <NumberField label={zip}></NumberField>
      <Select items={items}></Select>
    </>
  );
}

System Info

Hilla: 24.7.0.alpha5
Flow: 24.7.0.alpha4
Vaadin: 24.7.0.alpha3
Copilot: 24.7-SNAPSHOT
Frontend Hotswap: Enabled, using Vite
OS: aarch64 Mac OS X 14.7.1
Java: JetBrains s.r.o. 21.0.5
Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Java Hotswap: Java Hotswap is enabled
IDE Plugin: 1.0-SNAPSHOT IntelliJ

[web-padawan]

We use forwardRef for quite a few components like Dialog, MenuBar, Popover, TabSheet, TimePicker etc.
Could you please clarify if this issue applies to all of them or is it somehow specific only to Select component?

UPD: this was reported previously in #165 and was considered as fixed by #167

[abdullahtellioglu]

This issue applies to all. It is quite hard to use components when you do not have the type. You are quite forced to use documentation for such components.

[abdullahtellioglu]

Can you see the properties of such a component? IntelliSense gives ForwardRefExoticComponent<unknown> for the Select component in IntelliJ to me

[web-padawan]

I can confirm the issue, it also shows ForwardRefExoticComponent<unknown> and doesn't show suggestions.

Note, when in react-components project the issue manifests when importing like this:

import { Select } from '@vaadin/react-components';

However, when you use local relative import, then it looks as expected:

import { Select } from '../../packages/react-components/src/Select.js';

[web-padawan]

Looks like we can improve this by specifying return types for forwardRef() calls as e.g. ComboBox works fine.

const ForwardedSelect = forwardRef(Select) as (
  props: SelectProps & RefAttributes<SelectElement>,
) => ReactElement | null;

I'll test if this works for all components that use the same approach and then create a PR.

[abdullahtellioglu]

Thanks, @web-padawan 🙇 It would increase the usability of components significantly, in my opinion.

[web-padawan]

@abdullahtellioglu What version of IntelliJ do you have?

I was able to reproduce the issue was there with IntelliJ 2023.3.8, however after upgrading to 2024.3.1.1 the problem is gone:

[abdullahtellioglu]

I have 2024.1 version. Let me upgrade it and check it 👍