[BUG] Invalid font color when trying to change Input component about chakra-react-select HOT 8 CLOSED

If you're importing components like so:

import { components } from "chakra-react-select"

Then you are importing the original components from the react-select package. To import the CRS version, use the following:

import { chakraComponents } from "chakra-react-select"

from chakra-react-select.

Tried this as well. Seems that even then with type={"number"} does not work properly. (allows for non digit characters). Is there any solution for this in chakra-react-select?

from chakra-react-select.

It appears to be working fine for me:

import React, { useState } from "react";
import { Container, FormControl, FormLabel } from "@chakra-ui/react";
import {
  Select,
  OptionBase,
  chakraComponents,
  SelectComponentsConfig,
  GroupBase,
} from "chakra-react-select";

interface NumberOption extends OptionBase {
  label: string;
  value: number;
}

const options: NumberOption[] = [
  { label: "10", value: 10 },
  { label: "7", value: 7 },
  { label: "5,000", value: 5000 },
  { label: "140", value: 140 },
  { label: "9,500", value: 9500 },
];

const customComponents: SelectComponentsConfig<
  NumberOption,
  true,
  GroupBase<NumberOption>
> = {
  Input: (props) => <chakraComponents.Input {...props} type="number" />,
};

const App: React.FC = () => {
  const [selectedNumbers, setSelectedNumbers] = useState<
    readonly NumberOption[]
  >([]);

  return (
    <Container mb={16}>
      <FormControl p={4}>
        <FormLabel>chakra-react-select number input example</FormLabel>
        <Select
          isMulti
          name="numbers"
          options={options}
          placeholder="Select some numbers..."
          closeMenuOnSelect={false}
          value={selectedNumbers}
          onChange={setSelectedNumbers}
          components={customComponents}
        />
      </FormControl>
    </Container>
  );
};

CodeSandbox: https://codesandbox.io/s/w4ne5v?file=/app.tsx

One note though, why are you trying to make the input into a number input? I've never seen someone use the original react-select that way, and I'm not sure how well it will work overall. It appears that when I type - before a number, the - character gets stuck there.

EDIT: If you'd like to prevent the negative issue (or the same issue which happens when a user types the letter "e"), I realized you can prevent the key from propagating by using the onKeyDown function:

<Select
  onKeyDown={(e) => {
    if (["E", "e", "-"].includes(e.key)) {
      e.preventDefault();
    }
  }}
/>

So if you don't need negative numbers, I'd recommend doing something like this to prevent a user from typing them.

from chakra-react-select.

Try to type any letter. You will notice that something is visible but overflown. (firefox)

from chakra-react-select.

It appears to be working fine for me. Are you on Windows? Also like I was asking for, what's the use case here? There might be a better solution than using a number input.

from chakra-react-select.

My goal was to build build component allowing users to pick a Year. Important thing was to display on mobiles number keyboard instead of standard.

from chakra-react-select.

My goal was to build build component allowing users to pick a Year. Important thing was to display on mobiles number keyboard instead of standard.

Ah, if mobile is your primary goal, I highly recommend using the inputMode="numeric" prop on your custom input component. This is the best way to hint to mobile devices which keyboard type to display without needing to change the input's type.

Here's an example: https://codesandbox.io/s/qw2pn7?file=/app.tsx

Or if you want to try it on mobile, here's a full page example: https://qw2pn7.csb.app/

from chakra-react-select.

Some solutions have been provided so I'm going to close this issue, let me know if there's any other issues you're having

from chakra-react-select.