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

Custom props not showing up #5996

Open
lucarampi opened this issue Jan 23, 2025 · 1 comment
Open

Custom props not showing up #5996

lucarampi opened this issue Jan 23, 2025 · 1 comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet

Comments

@lucarampi
Copy link

lucarampi commented Jan 23, 2025

I am extending react-select to, and noticed an issue that my custom props are not being passed to the base components

<components.Placeholder {...props} cy-id="select-placeholder" data-john={"cena"}
>

Renders as:

Image

Here is my implementation:

Custom component:

import {
 components,
} from 'react-select';

function PlaceholderSimple<O extends IOption, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>({
  children,
  ...props
}: PlaceholderProps<O, M, G> & { icon?: LucideIcon }) {
  return (
    <components.Placeholder {...props} cy-id={'select-placeholder'}>
      <div className={'flex items-center gap-2'}>
        <span className='truncate'>{children}</span>
      </div>
    </components.Placeholder>
  );
}

Select

function Select<O extends IOption, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>({
  classNames,
  isMulti,
  isClearable = false,
  isSearchable = false,
  components,
  ...props
}: Props<O, M, G> & { showClearWhenDisabled?: boolean }) {
  return (
    <ReactSelect
      isSearchable={isSearchable}
      isClearable={isClearable}
      blurInputOnSelect
      {...props}
      classNames={...}

      components={{
        Placeholder: PlaceholderSimple, // Custom/default placeholder component
        ...components,
      }}

    />
  );
}

The idea is to have some extra "control data" for those components. From what I’ve been able to observe and analyze, there doesn’t seem to be a way to customize the props sent to the component, and if sent, they are ignored.

If there is no simple way to achieve this, I will temporarily wrap everything inside a div (not ideal, as it will break all my styles) waiting for a better solution.

Suggestion: One way to achieve this could be either directly through the component or via a property on the Select that allows passing props to each individual component, similar to how it’s done with classNames and components, and don't vanish with those custom props

@lucarampi lucarampi added the issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet label Jan 23, 2025
@WarnnerSinotti
Copy link

I am having the same problem, would be better having the power to manage props

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet
Projects
None yet
Development

No branches or pull requests

2 participants