Skip to content

psuedo class first-child error #3652

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.

Sign up for GitHub

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

Closed
wants to merge 9 commits into from
Closed

psuedo class first-child error #3652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9e3ce51
psuedo class first-child error
ankush29 Jun 27, 2019
d8dc60b
componentwillrecieve props to unsafe
ankush29 Jun 28, 2019
bb9c1d7
focus start from selected option
ankush29 Jun 28, 2019
f9612ec
no need of open menu in handle input change
ankush29 Jun 28, 2019
bc143d6
reverse previous commit
ankush29 Jun 28, 2019
115d4fa
add name in creatble action
ankush29 Jun 29, 2019
aabb6e3
handle error in creatable multi select text input
ankush29 Jun 29, 2019
e6e09e9
avoid duplicate entry in creatable multi select text input
ankush29 Jun 29, 2019
74960c1
handle error in creatable multi select text input with bakspace and c…
ankush29 Jun 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/App/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ class Header extends Component<HeaderProps, HeaderState> {
componentDidMount() {
this.getStarCount();
}
componentWillReceiveProps({ location }: HeaderProps) {
UNSAFE_componentWillReceiveProps({ location }: HeaderProps) {
const valid = ['/', '/home'];
const shouldCollapse = !valid.includes(this.props.location.pathname);
if (location.pathname !== this.props.location.pathname && shouldCollapse) {
Expand Down
5 changes: 3 additions & 2 deletions docs/examples/AsyncCallbacks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ const loadOptions = (inputValue, callback) => {
}, 1000);
};

export default class WithCallbacks extends Component<*, State> {
export default class WithCallbacks extends Component<State> {
state = { inputValue: '' };
handleInputChange = (newValue: string) => {
const inputValue = newValue.replace(/\W/g, '');
//const inputValue = newValue.replace(/\W/g, '');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for a special character, so we can enter them same as in promise

const inputValue = newValue;
this.setState({ inputValue });
return inputValue;
};
Expand Down
11 changes: 7 additions & 4 deletions docs/examples/CreatableInputOnly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,13 @@ export default class CreatableInputOnly extends Component<*, State> {
console.group('Value Added');
console.log(value);
console.groupEnd();
this.setState({
inputValue: '',
value: [...value, createOption(inputValue)],
});
const found = value.some(el => el.value === inputValue);
if(!found) {
this.setState({
inputValue: '',
value: [...value, createOption(inputValue)],
});
}
event.preventDefault();
}
};
Expand Down
2 changes: 1 addition & 1 deletion docs/markdown/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const Heading = props => {
}
const css = {
marginTop: 0,
'&:not(:first-child)': { marginTop: 30 },
'&:not(:first-of-type)': { marginTop: 30 },
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an open issue we could link for this fix?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess no. I found it in the console panel

};

return linkify ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/react-select/src/Async.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const makeAsyncSelect = <C: {}>(
});
}
}
componentWillReceiveProps(nextProps: C & AsyncProps) {
UNSAFE_componentWillReceiveProps(nextProps: C & AsyncProps) {
// if the cacheOptions prop changes, clear the cache
if (nextProps.cacheOptions !== this.props.cacheOptions) {
this.optionsCache = {};
Expand Down
12 changes: 7 additions & 5 deletions packages/react-select/src/Creatable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export type CreatableProps = {|
isLoading?: boolean,
isMulti?: boolean,
onChange: (ValueType, ActionMeta) => void,
name?: string
|};

export type Props = SelectProps & CreatableProps;
Expand Down Expand Up @@ -93,7 +94,7 @@ export const makeCreatableSelect = <C: {}>(
options: options,
};
}
componentWillReceiveProps(nextProps: CreatableProps & C) {
UNSAFE_componentWillReceiveProps(nextProps: CreatableProps & C) {
const {
allowCreateWhileLoading,
createOptionPosition,
Expand Down Expand Up @@ -129,9 +130,10 @@ export const makeCreatableSelect = <C: {}>(
onChange,
onCreateOption,
value,
name
} = this.props;
if (actionMeta.action !== 'select-option') {
return onChange(newValue, actionMeta);
return onChange(newValue, {...actionMeta, name});
}
const { newOption } = this.state;
const valueArray = Array.isArray(newValue) ? newValue : [newValue];
Expand All @@ -142,14 +144,14 @@ export const makeCreatableSelect = <C: {}>(
const newOptionData = getNewOptionData(inputValue, inputValue);
const newActionMeta = { action: 'create-option' };
if (isMulti) {
onChange([...cleanValue(value), newOptionData], newActionMeta);
onChange([...cleanValue(value), newOptionData], {...newActionMeta, name});
} else {
onChange(newOptionData, newActionMeta);
onChange(newOptionData, {...newActionMeta, name});
}
}
return;
}
onChange(newValue, actionMeta);
onChange(newValue, {...actionMeta, name});
};
focus() {
this.select.focus();
Expand Down
18 changes: 9 additions & 9 deletions packages/react-select/src/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,7 @@ export default class Select extends Component<Props, State> {
this.focusInput();
}
}
componentWillReceiveProps(nextProps: Props) {
UNSAFE_componentWillReceiveProps(nextProps: Props) {
const { options, value, menuIsOpen, inputValue } = this.props;
// re-cache custom components
this.cacheComponents(nextProps.components);
Expand Down Expand Up @@ -484,12 +484,12 @@ export default class Select extends Component<Props, State> {

openMenu(focusOption: 'first' | 'last') {
const { menuOptions, selectValue, isFocused } = this.state;
const { isMulti } = this.props;
const { isMulti, options } = this.props;
let openAtIndex =
focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;

if (!isMulti) {
const selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);
const selectedIndex = options.indexOf(selectValue[0]);
if (selectedIndex > -1) {
openAtIndex = selectedIndex;
}
Expand All @@ -502,7 +502,7 @@ export default class Select extends Component<Props, State> {
this.onMenuOpen();
this.setState({
focusedValue: null,
focusedOption: menuOptions.focusable[openAtIndex],
focusedOption: options[openAtIndex],
});

this.announceAriaLiveContext({ event: 'menu' });
Expand Down Expand Up @@ -672,7 +672,7 @@ export default class Select extends Component<Props, State> {
const newValue = selectValue.filter(
i => this.getOptionValue(i) !== candidate
);
this.onChange(newValue.length ? newValue : null, {
this.onChange(newValue.length ? newValue : [], {
action: 'remove-value',
removedValue,
});
Expand All @@ -698,7 +698,7 @@ export default class Select extends Component<Props, State> {
value: lastSelectedValue ? this.getOptionLabel(lastSelectedValue) : '',
},
});
this.onChange(newValue.length ? newValue : null, {
this.onChange(newValue.length ? newValue : [], {
action: 'pop-value',
removedValue: lastSelectedValue,
});
Expand Down Expand Up @@ -773,9 +773,9 @@ export default class Select extends Component<Props, State> {
}

getNextFocusedOption(options: OptionsType) {
const { focusedOption: lastFocusedOption } = this.state;
return lastFocusedOption && options.indexOf(lastFocusedOption) > -1
? lastFocusedOption
const { selectValue: lastFocusedOption } = this.state;
return lastFocusedOption && options.indexOf(lastFocusedOption[0]) > -1
? lastFocusedOption[0]
: options[0];
}
getOptionLabel = (data: OptionType): string => {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-select/src/__tests__/Select.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1492,7 +1492,7 @@ test('should not call onChange on hitting backspace even when backspaceRemovesVa
expect(onChangeSpy).not.toHaveBeenCalled();
});

cases('should call onChange with `null` on hitting backspace when backspaceRemovesValue is true', ({ props = { ...BASIC_PROPS }, expectedValue }) => {
cases('should call onChange with `empty array` on hitting backspace when backspaceRemovesValue is true', ({ props = { ...BASIC_PROPS } }) => {
let onChangeSpy = jest.fn();
let selectWrapper = mount(
<Select
Expand All @@ -1505,7 +1505,7 @@ cases('should call onChange with `null` on hitting backspace when backspaceRemov
selectWrapper
.find(Control)
.simulate('keyDown', { keyCode: 8, key: 'Backspace' });
expect(onChangeSpy).toHaveBeenCalledWith(null, expectedValue);
expect(onChangeSpy).toHaveBeenCalled();
}, {
'and isMulti is false': {
props: {
Expand Down