Способ отображения выбранной строки с адресом

[alexbom]

Добрый день! Скажите, пожалуйста, есть ли возможность настроить вид выбранного значения в выпадающем списке AddressSuggestions? Сейчас при выборе города из выпадающего списка выбранный элемент отображается так:

Краснодарский край, г Геленджик

или так:

г Москва

Я бы хотел настроить способ отображения, чтобы показывать только название города:

Геленджик

или:

Москва

Можно ли это реализовать с помощью опций компонента?

[vitalybaev]

Добрый день!

Да, вы можете в пропсах компонента прокинуть коллбек renderOption - функция, которая принимает один аргумент - объект подсказки, и должна вернуть любой JSX, который будет отображаться

import React, { useRef } from 'react';
import { AddressSuggestions } from 'react-dadata';

// Как то так, можно возвращать любую верстку, например с расширенными данными, как угодно
<AddressSuggestions
  renderOption={(suggestion) => (<span>{suggestion.data.city}</span>)}
/>

Единственный момент, что в таком случае не будет доступно выделение совпадений. Вообще можно воспользоваться пакетом react-words-highlight, который внутренне используется для этого, но в настоящий момент в колбеке нет информации какой запрос вообще сейчас введен в поле. Но - можно его хранить в стейте, сохраняя его в inputProps={{ onChange: (event) => { /** Тут сохраняем значение из поля ввода */} }}

[alexbom]

Я выразился неточно. Опции в выпадающем списке выглядят хорошо. Но необходимо убрать лишнее в выбранном элементе, когда Select уже свёрнут. Когда опция выбрана, хотелось бы видеть только название города.

[vitalybaev]

Тогда сложнее, просто менять значение в поле вводе не очень хорошая идея поскольку при редактировании значения его текст используется для подгрузки вариантов Как вариант решения - хранить в стейте выбранную подсказку, подписаться на события инпута onBlur и onFocus. При onBlur - используя метод setInputValue ставим туда нужное обрезанное значение. При onFocus - возвращаем полное. Это чисто мысли вслух, но вроде бы может сработать в вашем варианте.

А саму подсказку нужно полную с адресом? Не подойдет ограничение области поиска от самой DaData?