Rall3n Github contribution chart
Rall3n Github Stats
Rall3n Most Used Languages

Activity

26 Sep 2022

Rall3n

started

Started On 26 Sep 2022 at 02:58:57

Rall3n

started

Started On 26 Sep 2022 at 02:58:51

Rall3n

started

Started On 26 Sep 2022 at 11:20:42

Rall3n

started

Started On 24 Sep 2022 at 10:03:29
Started

Rall3n

started

Started On 16 Sep 2022 at 05:23:33

Rall3n

started

Started On 16 Sep 2022 at 05:23:21
Issue Comment

Rall3n

[Custom Menu List Component] unable to type in input box when it is inside a react select menuList

I am trying to add Input Box inside a menulist. Inputs onclick event responds where as on change doesn't work.

Forked On 15 Sep 2022 at 11:57:10

Rall3n

Hello @tnyidol,

without a proper reproducible example I can not confirm if this is an issue with the library or an issue regarding implementation.

In regards to adding an input inside the menu I would redirect you to #3111. This comment has an implementation that is still usable with the current version. Basically you have to manage menuIsOpen if the input inside of the menu is focused, as focus and open state is by default managed through the search input.

Commented On 15 Sep 2022 at 11:57:10
Issue Comment

Rall3n

Custom search inside options

Hi everyone, i need to add custom search inside dropdown menu, but can't focus input, here an example: https://codesandbox.io/s/codesandboxer-example-forked-evg7wj?file=/example.tsx open menu and try to focus input inside menu

Forked On 15 Sep 2022 at 06:18:11

Rall3n

Hello @Spaider15,

based on the gist of this issue I would categorize it as a duplicate of #3111 and would close it as such. This comment provides an implementation which still works with the current version.

Commented On 15 Sep 2022 at 06:18:11
Issue Comment

Rall3n

I can't override the border-radius value to 0.

I have been trying to set the border-radius to 0 but could not. I want to remove the rounded corners.
Please help. Thanks!

below is the code I am using. I tried borderRadius: "0 !mportant" and seems not working. :(

export const customStyle = {
    placeholder: (base) => ({
        ...base,
        color: "#999999",
        fontWeight: 400
    }),
    noOptionsMessage : base => ({...base, ...msgStyles}),
    dropdownIndicator: (base) => ({
        ...base,
        color        : "#666666",
        paddingTop   : 0,
        paddingBottom: 0,
        paddingLeft  : 0,
        paddingRight : 8
    }),
    option           : (base, {isSelected}) => ({
        ...base,
        borderTop  : `1px solid #CCCCCC`,
        borderLeft : `1px solid #CCCCCC`,
        borderRight: `1px solid #CCCCCC`,
        "&:hover"  : {
            borderColor: "#CCCCCC",
            background : "#0087FB",
            color      : "#FFFFFF",
            cursor: "pointer"
        },
        fontWeight : 400,
        background : isSelected ? "#0087FB" : "#FFFFFF",
        margin     : 0,
        padding    : 10,
        fontSize: 12
    }),
    menu             : (provided) => ({
        ...provided,
        border      : "none",
        borderBottom: `1px solid #CCCCCC`,
        margin      : 0,
        padding     : 0,
        boxShadow: "4px 4px 4px #999999",
        zIndex: 1
    }),
    menuList         : (provided) => ({
        ...provided,
        paddingTop   : 0,
        paddingBottom: 0,
        boxShadow    : "none",
        borderTop    : "none"
    }),
    control          : (base, {isDisabled, isFocused}) => ({
        ...base,
        borderRadius: 0,
        border      : `1px solid ${isFocused ? "#00B2E2" : "#CCCCCC"}`,
        "&:hover"   : {
            borderColor: isFocused ? "#00B2E2" : "#CCCCCC",
            cursor: "pointer"
        },
        minHeight   : 32,
        fontWeight  : 400,
        background  : isDisabled ? "#EBEBEB": "#FFFFFF",
        marginTop   : 1,
        boxShadow   : 0,
        fontSize: 12,
    }),
    singleValue: (styles, { isDisabled }) => ({ 
        ...styles, 
        color: isDisabled ? "#CCCCCC": "#333333"
    }),
}; 

Forked On 14 Sep 2022 at 08:20:07

Rall3n

@simplymequeeny I cannot confirm the problem you encounter exists with the code you provided.

Would you be so kind and provide an minimal executable example using CodeSandbox showing the problem as requested in the issue template?

Commented On 14 Sep 2022 at 08:20:07
Issue Comment

Rall3n

Unfocused Select in form always intercepts submit on enter

Unfocused Select inside form tag prevents user from submitting whole form on enter, no matter if it has values/suggestions or not.

Reproduction: focus on input and press enter, in case Select is present form will not be submitted: https://codesandbox.io/s/intelligent-wilbur-e0hv9t?file=/src/App.js

Forked On 14 Sep 2022 at 08:11:20

Rall3n

@Oikio This is standard browser behavior.

Based on current spec:

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, Email, Password, Date, Month, Week, Time, Local Date and Time, Number - HTML Standard | Form | Implicit submission

In other words: The form can be submitted from an <input> element if it is the only validatable <input> element in the form or if there is a submit button present.

And react-select uses an <input> element for searching, so your <input> element is not the only existing one in the form, and form submission is prevented according to the spec.


I will close this issue as it being not an issue with the library, but a misunderstanding of standard browser behavior.

Commented On 14 Sep 2022 at 08:11:20
Issue Comment

Rall3n

Scrolllock shifts layout.

When i set my vertical scrollbars always on with menuShouldBlockScroll, there is a padding-right added to the body which shifts entire layout and i get white stripe on the right end of the page. Not sure how it should act, but if I set my OS settings to auto hide scrollbars it works okay. Maybe there should be a prop to opt out from this padding adjustment?

Forked On 14 Sep 2022 at 06:03:08

Rall3n

@sblad Please provide a minimal reproducible example using CodeSandbox as requested in the issue template.

Commented On 14 Sep 2022 at 06:03:08
Issue Comment

Rall3n

How to properly receive props data in react-select's custom component?

Discussed in https://github.com/JedWatson/react-select/discussions/5340

Originally posted by stonix26 September 13, 2022 I created a custom component to customize the control field, for me to place a custom label with animation. And I can't figure out where to place or receive that prop.

import React from "react";
import { components, ControlProps, GroupBase, Props } from "react-select";
import ReactSelectAsync, { AsyncProps } from "react-select/async";

type TCustomAsyncSelect = (
  props: Props &
    Pick<
      AsyncProps<unknown, boolean, GroupBase<unknown>>,
      "defaultOptions" | "cacheOptions" | "loadOptions" | "isLoading"
    >
) => JSX.Element;

const Control:
  | React.ComponentType<ControlProps<unknown, boolean, GroupBase<unknown>>>
  | undefined = (props) => (
  <div style={{ backgroundColor: "pink", padding: "10px 20px" }}>
    <p>dynamic label title here</p>
    <components.Control {...props} />
  </div>
);

const CustomAsyncSelect: TCustomAsyncSelect = (props) => (
  <ReactSelectAsync {...props} components={{ Control }} />
);

export default CustomAsyncSelect; 

I tried placing the custom control component inside my CustomAsyncSelect component, so that I can easily receive my label prop from my CustomAsyncSelect, but it seems there's an issue during render, it loses focus on every keystroke.

Here's my codesandbox for you to play around with.

Forked On 13 Sep 2022 at 02:44:05

Rall3n

@stonix26 Please do not open an issue for a discussion minutes after its creation. If the problem identifies as an issue, it will be elevated accordingly. But at first glance this is merely a question regarding implementation.

I will close this for now. Conversation should be continued in the linked discussion.

Commented On 13 Sep 2022 at 02:44:05

Rall3n

started

Started On 03 Sep 2022 at 05:25:34
Issue Comment

Rall3n

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code

I am getting these errors when I add Creatable or even select in my code: image image image Can you plz guide me why am I getting these errors and any possible solution? I followed this link for implementation: https://www.digitalocean.com/community/tutorials/react-react-select

Forked On 15 Aug 2022 at 08:11:53

Rall3n

Duplicate of #4246.

Issue has already been resolved in newer versions of react-select (>3.1.0). Please update your projects dependencies.

Commented On 15 Aug 2022 at 08:11:53

Rall3n

started

Started On 09 Aug 2022 at 10:21:16

Rall3n

started

Started On 04 Aug 2022 at 01:08:27

Rall3n

Plug in crashes every few minutes

The Amazon plug in crashes every few minutes. I am new to posting issues, so please let me know what I can give you to help.

I am running: Windows 10 x64 v21H1 GOG Galaxy version 2.0.41.150 - Beta Plugin version 0.4.1

I have tried reinstalling the plug in, and disconnecting reconnection, to no avail

Forked On 04 Aug 2022 at 12:40:51

Rall3n

@jedthe3rd Would you mind providing the log files for both the plugin and Galaxy in general?

Commented On 04 Aug 2022 at 12:40:51

Rall3n

started

Started On 03 Aug 2022 at 03:49:24

Rall3n

started

Started On 03 Aug 2022 at 03:49:12

Rall3n

started

Started On 26 Jul 2022 at 02:02:59

Rall3n

started

Started On 26 Jul 2022 at 02:02:53
Issue Comment

Rall3n

closeMenuOnSelect not working as expected with <label />

Hi, thanks for creating this library! I'm currently having a problem while creating a dropdown, where i'm trying to check/uncheck the input if someone clicks the list item, i'm using <label /> & <input /> combo and i want to keep the list open when someone is selecting, but even after setting the closeMenuOnSelect prop to false it's not working as expected, the only time it works is when i directly click on the input checkbox

Steps to reproduce:

  1. Go to https://codesandbox.io/s/react-select-input-label-w2cp2t
  2. Open the dropdown and click directly on the checkbox, it will work as expected
  3. Now click on the title of the list item, dropdown will close without even checking the box

Forked On 15 Jul 2022 at 09:24:31

Rall3n

Hello @errmayank,

this issue was already filed on this repository (#4666).

Closing as duplicate.

Commented On 15 Jul 2022 at 09:24:31

Rall3n

The repository for high quality TypeScript type definitions.

Forked On 14 Jul 2022 at 09:52:01

Rall3n

started

Started On 11 Jul 2022 at 05:12:17