Comments (8)
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.
Related Issues (20)
- [BUG] name and required does not work with standard form validation HOT 2
- [BUG]: `colorScheme` doesn't get passed to input variants HOT 4
- [BUG] `selectedOptionStyle` and `variant` are missing from `Select` types. HOT 16
- selectedOptionStyle with isMulti HOT 1
- [BUG] Breaking Change in chakraui/icon HOT 6
- Property "size" does not exist on type HOT 1
- [BUG] "default" is not exported by "node_modules/@chakra-ui/icon/dist/index.mjs", imported by "node_modules/chakra-react-select/dist/esm/chakra-components/menu.js". HOT 1
- [BUG] useBasicStyles type error on Vite HOT 1
- [BUG] Group Heading props does not work HOT 3
- [Feature request] Allow adding some related keywords to dropdown items so that they can be searched based on those keywords HOT 1
- [BUG] Problem with accessibility of the CreatableSelect (nested interactive elements) HOT 2
- [BUG] peerDependencies to Chakra v2 still show up HOT 5
- [BUG] Cannot start the application when using chakra-react-select with Vite HOT 2
- [BUG] Custom components automatically switch to Chakra style instead of keeping default HOT 1
- [BUG]: No `ValueType` export for the `onChange` handler HOT 11
- property data-testid is not render
- [BUG] Version 4.7.6 breaks colors for selected item HOT 2
- [BUG] LoadOptions doesn't render options when isMulti = True and there is already one selected option in component HOT 1
- [BUG] Incompatible with Chakra UI Pro theme HOT 3
- [BUG] When selecting default values in a form, these values will still be selectable inside the dropdown (zod) HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chakra-react-select.