mui / mui/material-ui

For Mui Select Component SelectectProps Having some type error on production build

Open
#35,747 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: select
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

TS2322: Type '{ options: { id: number; name: string; }[]; color: string; label: string; defaultValue: number; value: number; handleChange: (e: SelectChangeEvent<unknown>) => void; }' is not assignable to type 'IntrinsicAttributes & CustomSelectBoxProps'.
  Property 'color' does not exist on type 'IntrinsicAttributes & CustomSelectBoxProps'.
    89 |                     <CustomSelectBox
    90 |                         options={prefixSuffixContent}
  > 91 |                         color="secondary"
       |                         ^^^^^
    92 |                         label="Select Format"
    93 |                         defaultValue={IS_NUMERIC}
    94 |                         value={prefixSuffixValue}

This is showed up on production build. on local build it is fine
image_2023_01_07T06_06_35_396Z

Here My Custom extented Props type :

import { InputBaseProps, SelectChangeEvent, SelectProps } from "@mui/material";

export type OptionsType = {
    id: string | number;
    name: string;
};
export interface CustomSelectBoxProps extends SelectProps {
    /**
     * The variant to use.
     * @default 'outlined'
     */
    variant?: "standard" | "outlined" | "filled";
    /**
     * The size of the component.
     */
    size?: InputBaseProps["size"];
    /**
     * See [OutlinedInput#label](/material-ui/api/outlined-input/#props)
     */
    label?: React.ReactNode;
    register?: object | any;
    fieldDisable?: InputBaseProps["disabled"];
    defaultValue?: InputBaseProps["defaultValue"];
    value?: InputBaseProps["value"];
    handleBlur?: React.FocusEventHandler<any> | null;
    handleChange?: ((event: SelectChangeEvent<unknown>, child: React.ReactNode) => void) | null;
    options: any[];
    customClass?: string;
    inputLabelSize?: "small" | "normal";
    disableItems?: any[];
}


<CustomSelectBox
                                options={prefixSuffixContent}
                                color="secondary"
                                register={field}
                                label="Select Format"
                            />

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository file, test, or Material UI entry point is identified; start by reproducing the reported production-build TS2322 error from the CustomSelectBoxProps example and compare it with the local build. Done would require a confirmed cause for the differing prop typing and a production build that no longer reports the error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.