Bug in examples/elasticsearch

[dyihoon90]

Hi,

I discovered a bug running the example in examples/elasticsearch

I have successfully started a local elasticsearch, added the data, and started both server and app with npm start

Steps to repro:
in a first tab localhost:3000 do:

1. Search for 'mountain'
2. Search for 'basin'

in a second tab localhost:3000 do:

1. Search for 'basin'

You will see that the first tab has, incorrectly, the following as the first result as a residual of the first search 'mountain':

description Covering most of Mount Desert Island and other coastal islands, Acadia features the tallest mountain on the Atlantic coast of the United States, granite peaks, ocean shoreline, woodlands, and lakes.
id park_acadia
title Acadia
nps_link https://www.nps.gov/acad/index.htm

The second tab displays the correct results:

Great Basin
description Based around Nevada's second tallest mountain, Wheeler Peak, Great Basin National Park contains 5,000-year-old bristlecone pines, a rock glacier, and the limestone Lehman Caves.
id park_great-basin
title Great Basin
nps_link https://www.nps.gov/grba/index.htm

Further Info:

Dependencies

{
    "@elastic/react-search-ui": "1.5.1",
    "@elastic/react-search-ui-views": "1.5.1",
    "@elastic/search-ui": "1.5.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  }

Versions

MacOSX: 11.3.1 (20E241)
❯ node -v
v14.17.0
❯ npm -v
7.14.0

Other discoveries

• Same issue occurs using my own onSearch function. That was actually how I discovered this bug
• Issue happens on both Chrome and Safari
• Issue does not occur in examples/sandbox

[JasonStoltz]

Thanks for reporting this!

[dyihoon90]

I found out the issue occurs in scenario where 2 or more results have the same title, resulting in the same key in the unordered list.

index.js:1 Warning: Encountered two children with the same key, `result-<title>`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in ul (created by ResultsContainer)
    in ResultsContainer (created by WithSearch)
...

edit:
To be more exact, this bug is visible when two or more results in the results array in the state has the same id. For example:

{
results: [
 {"id":{"raw":"6fa43d006940be4c5d731868e8c4f2fe"}} ,
 {"id":{"raw":"6fa43d006940be4c5d731868e8c4f2fe"}}
]
}

I had two items in my local elasticsearch that was the same as I ran insert twice.

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[yakhinvadim]

We replaced the previous elasticsearch example with the first-party elasticsearch connector. Give it a try and let us know if have any feedback! #704

[dyihoon90]

awesome, thanks for the update!