New changeOnSelect Prop

Sometimes when selecting an option it might be useful to take the selected option and modify it a bit. A perfect example of this is how discord handles tagging users. Someone can tag another user using the @ character which might look like this, @Lazaro. Although this is what the user sees the true text is <@148912207109816321>. Allowing the user to select an easy-to-read option and then on selection converting it to a proper format is a great feature. Below I explain every change I made.

changeOnSelect Prop

This new function prop is what handles modifying the selected text. It takes in the trigger and slug value and it uses its return value as the text to display.

New trigger key in this.state

Since there could be multiple triggers it is useful to have which trigger the user used saved in the state.

part1 variable

The part1 variable use to include the trigger but since the default changeOnSelect function returns the trigger and slug together it now excludes it. To exclude it we take the trigger from the state and make the end index equal to matchStart - trigger.length.

event.target.value AND updateCaretPosition

Since the user might choose to modify the selected option both event.target.value AND updateCaretPosition are now taking the changedStr variable which is the return value of the changeOnSelect function.

New tests

New tests were added to verify this feature is working properly for current and future builds. This is also a good example of how the prop operates.

I decided to create another prop instead of implementing this feature on the current existing onSelect prop to not break the existing code some people might have. I also added this prop to the README but if you think it is not descriptive enough please let me know or feel free to change it if this PR is accepted.

yury-dymov / react-autocomplete-input