From b23db01365569b5c861e4d031c7c864e2ce6159c Mon Sep 17 00:00:00 2001 From: joao lopes Date: Sat, 29 Jul 2023 17:26:28 -0300 Subject: [PATCH 1/3] fix (#1652): resolve error trim for data object in AutoComplete component --- .../__tests__/Autocomplete.test.js | 27 +++++++++++++++++++ src/autocomplete/src/Autocomplete.js | 11 +++----- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/autocomplete/__tests__/Autocomplete.test.js b/src/autocomplete/__tests__/Autocomplete.test.js index e4673994e..5399ce113 100644 --- a/src/autocomplete/__tests__/Autocomplete.test.js +++ b/src/autocomplete/__tests__/Autocomplete.test.js @@ -84,5 +84,32 @@ describe('Autocomplete', () => { expect(textInput).toHaveValue('A') }) }) + + describe('when inputvalues is object', () => { + it.only('should read data autocomplete', async () => { + const items = [{name: 'Apple', id: 1}, {name: 'Orange', id: 2}] + + render( + makeAutocompleteFixture({ + allowOtherValues: true, + items, + itemToString: (item) => (item ? item.name : ""), + }) + ) + + // Type 'A' into the input to filter items down containing the string + const textInput = await screen.findByTestId('TextInput') + userEvent.click(textInput) + userEvent.type(textInput, 'A') + + // Click the 'Apple' option, which should also update the input element + const item = await screen.findByText('Apple') + userEvent.click(item) + + + // an object will be returned in the input without error + expect(textInput).toHaveValue('Apple') + }) + }); }) }) diff --git a/src/autocomplete/src/Autocomplete.js b/src/autocomplete/src/Autocomplete.js index e9fb47dd4..ef4ff6575 100644 --- a/src/autocomplete/src/Autocomplete.js +++ b/src/autocomplete/src/Autocomplete.js @@ -2,7 +2,7 @@ import React, { memo, forwardRef, useState, useEffect, useCallback } from 'react import VirtualList from '@segment/react-tiny-virtual-list' import Downshift from 'downshift' import fuzzaldrin from 'fuzzaldrin-plus' -import PropTypes from 'prop-types' +import PropTypes, { string } from 'prop-types' import { Position } from '../../constants' import { Pane } from '../../layers' import { Popover } from '../../popover' @@ -46,7 +46,7 @@ const AutocompleteItems = ({ width }) => { itemsFilter = itemsFilter || fuzzyFilter(itemToString) - const items = isFilterDisabled || inputValue.trim() === '' ? originalItems : itemsFilter(originalItems, inputValue) + const items = isFilterDisabled || (typeof inputValue === 'string' && inputValue.trim() === '') ? originalItems : itemsFilter(originalItems, inputValue) if (items.length <= 0) return null @@ -128,11 +128,8 @@ const Autocomplete = memo( } if (props.allowOtherValues && state.isOpen && !changes.isOpen) { - return { - ...changes, - selectedItem: changes.selectedItem || state.inputValue, - inputValue: changes.selectedItem || state.inputValue - } + const valueItem = changes.selectedItem || state.inputValue; + return typeof valueItem === 'object' ? {...changes, selectedItem: valueItem} : {...changes, selectedItem: valueItem, inputValue: valueItem} } return changes From b45b511a813a59dd5ba02497a64c59cc509077c1 Mon Sep 17 00:00:00 2001 From: joao lopes Date: Sat, 29 Jul 2023 17:28:08 -0300 Subject: [PATCH 2/3] fix (#1652): resolve error trim for data object in AutoComplete component --- src/autocomplete/src/Autocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/autocomplete/src/Autocomplete.js b/src/autocomplete/src/Autocomplete.js index ef4ff6575..dfc95c00b 100644 --- a/src/autocomplete/src/Autocomplete.js +++ b/src/autocomplete/src/Autocomplete.js @@ -2,7 +2,7 @@ import React, { memo, forwardRef, useState, useEffect, useCallback } from 'react import VirtualList from '@segment/react-tiny-virtual-list' import Downshift from 'downshift' import fuzzaldrin from 'fuzzaldrin-plus' -import PropTypes, { string } from 'prop-types' +import PropTypes from 'prop-types' import { Position } from '../../constants' import { Pane } from '../../layers' import { Popover } from '../../popover' From 60e3bc5aa5f6bfb1e47a6cc383d33ca1c0abbe4a Mon Sep 17 00:00:00 2001 From: joao lopes Date: Sat, 29 Jul 2023 17:46:17 -0300 Subject: [PATCH 3/3] fix: prettier --- src/autocomplete/__tests__/Autocomplete.test.js | 12 +++++++----- src/autocomplete/src/Autocomplete.js | 11 ++++++++--- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/autocomplete/__tests__/Autocomplete.test.js b/src/autocomplete/__tests__/Autocomplete.test.js index 5399ce113..683ec107a 100644 --- a/src/autocomplete/__tests__/Autocomplete.test.js +++ b/src/autocomplete/__tests__/Autocomplete.test.js @@ -86,14 +86,17 @@ describe('Autocomplete', () => { }) describe('when inputvalues is object', () => { - it.only('should read data autocomplete', async () => { - const items = [{name: 'Apple', id: 1}, {name: 'Orange', id: 2}] + it('should read data autocomplete', async () => { + const items = [ + { name: 'Apple', id: 1 }, + { name: 'Orange', id: 2 } + ] render( makeAutocompleteFixture({ allowOtherValues: true, items, - itemToString: (item) => (item ? item.name : ""), + itemToString: item => (item ? item.name : '') }) ) @@ -106,10 +109,9 @@ describe('Autocomplete', () => { const item = await screen.findByText('Apple') userEvent.click(item) - // an object will be returned in the input without error expect(textInput).toHaveValue('Apple') }) - }); + }) }) }) diff --git a/src/autocomplete/src/Autocomplete.js b/src/autocomplete/src/Autocomplete.js index dfc95c00b..7f3bf05a2 100644 --- a/src/autocomplete/src/Autocomplete.js +++ b/src/autocomplete/src/Autocomplete.js @@ -46,7 +46,10 @@ const AutocompleteItems = ({ width }) => { itemsFilter = itemsFilter || fuzzyFilter(itemToString) - const items = isFilterDisabled || (typeof inputValue === 'string' && inputValue.trim() === '') ? originalItems : itemsFilter(originalItems, inputValue) + const items = + isFilterDisabled || (typeof inputValue === 'string' && inputValue.trim() === '') + ? originalItems + : itemsFilter(originalItems, inputValue) if (items.length <= 0) return null @@ -128,8 +131,10 @@ const Autocomplete = memo( } if (props.allowOtherValues && state.isOpen && !changes.isOpen) { - const valueItem = changes.selectedItem || state.inputValue; - return typeof valueItem === 'object' ? {...changes, selectedItem: valueItem} : {...changes, selectedItem: valueItem, inputValue: valueItem} + const valueItem = changes.selectedItem || state.inputValue + return typeof valueItem === 'object' + ? { ...changes, selectedItem: valueItem } + : { ...changes, selectedItem: valueItem, inputValue: valueItem } } return changes