feat(addressSearch): migrate plugin by dopenguin · Pull Request #479 · Dataport/polar

dopenguin · 2026-01-16T15:26:03Z

Summary

The addressSearch plugin is migrated to POLAR@3.

Instructions for local reproduction and review

Receive multiple configurations through a secure channel.
Open snowbox.
Search wildly with the different configurations.

Caveats

The order plugins are added is (sadly) still important for them to work with one another.
I've changed the order of plugins so that it works for now. If we got a coordinateSource like in ReverseGeocode and Pins, the initial watch can only be added when the order of plugins is correct. We should tackle this in a separate PR so that one can freely add or remove plugins and all watchers work.

Relevant tickets, issues, et cetera

Closes #369

… to tsdoc

…arch input

…irectly migrated

…t calls an action on input

…dency library just over lodash

…3/migrate-plugin-address-search

…earch

…he addition of the results

…eight

…earch as a wrapper

…d functionality for resultList

dopenguin · 2026-02-16T09:54:23Z

🏓 @dopenguin

Receive multiple configurations through a secure channel.

Please send multiple configurations through a secure channel.

@warm-coolguy

🏓 @dopenguin

🏓 @warm-coolguy

🏓 @dopenguin https://www.youtube.com/watch?v=GpTPm1R4_AM&t=16s

🏓 @warm-coolguy

warm-coolguy · 2026-02-16T11:56:22Z

🏓 @dopenguin

Receive multiple configurations through a secure channel.

Please send multiple configurations through a secure channel.

@warm-coolguy

🏓 @dopenguin

🏓 @warm-coolguy

🏓 @dopenguin https://www.youtube.com/watch?v=GpTPm1R4_AM&t=16s

🏓 @warm-coolguy

🏓 @dopenguin

…ike nineRegions

… in nineRegions

dopenguin · 2026-02-16T17:32:54Z

🏓 @dopenguin

Receive multiple configurations through a secure channel.

Please send multiple configurations through a secure channel.

@warm-coolguy

🏓 @dopenguin

🏓 @warm-coolguy

🏓 @dopenguin https://www.youtube.com/watch?v=GpTPm1R4_AM&t=16s

🏓 @warm-coolguy

🏓 @dopenguin

As discussed, I've adjusted several things

Opening and closing menus now works via id d6e2684
The iconMenu now flows like before in layout: 'standard' fb7f20b, bf3061f
The width of the search is now using a proper maximum a698276
The results are now properly being displayed above other content 110b932
Clear button and loading indicator are now correctly placed in layout: 'nineRegions' d29a774
The search input now has a search icon prepended 2943896

🏓 @warm-coolguy

warm-coolguy

🏓 @dopenguin

Receive multiple configurations through a secure channel.

Please send multiple configurations through a secure channel.

@warm-coolguy

🏓 @dopenguin

🏓 @warm-coolguy

🏓 @dopenguin https://www.youtube.com/watch?v=GpTPm1R4_AM&t=16s

🏓 @warm-coolguy

🏓 @dopenguin

As discussed, I've adjusted several things

* Opening and closing menus now works via id [d6e2684](https://github.com/Dataport/polar/commit/d6e2684b1585bd081af4d9820aa2da99aec865a2)

* The iconMenu now flows like before in `layout: 'standard'` [fb7f20b](https://github.com/Dataport/polar/commit/fb7f20b463042b6e9d25575ed7cbf6ebc2f1759d), [bf3061f](https://github.com/Dataport/polar/commit/bf3061f933b0e3f308d25fb6e8052e91989a27d3)

* The width of the search is now using a proper maximum [a698276](https://github.com/Dataport/polar/commit/a6982767ca12c490d833b54091d4b1be6a68d509)

* The results are now properly being displayed above other content [110b932](https://github.com/Dataport/polar/commit/110b93239192e75e3879cb4c976b5f54624519ef)

* Clear button and loading indicator are now correctly placed in `layout: 'nineRegions'` [d29a774](https://github.com/Dataport/polar/commit/d29a774228614a2c6d06e4ba28cf6796440ee9a9)

* The search input now a search icon prepended [2943896](https://github.com/Dataport/polar/commit/2943896dc722273b5b7b8247feba9de384f0c564)

🏓 @warm-coolguy

🏓 @dopenguin

src/plugins/iconMenu/store.ts

warm-coolguy · 2026-02-17T06:25:02Z

src/plugins/addressSearch/components/AddressSearch.ce.vue

+				:value="selectedGroupId"
+				@update:value="selectedGroupId = $event as string"
+			/>
+			<span class="kern-icon kern-icon--search" aria-hidden="true" />


The icon is visually off / vertically uncentered.

warm-coolguy · 2026-02-17T06:30:31Z

src/plugins/addressSearch/components/AddressSearch.ce.vue

+					</span>
+				</button>
+				<!-- TODO: Displaying this when multipleGroups are being used jiggles a bit -->
+				<span v-if="hint.length > 0" class="polar-plugin-address-search-hint">


The popping in/out of the hint bar is causing a huge shift in the element's sizing. This was an issue before, but now, with the magnifying glass jumping, the flickering's become quite the problem.

I suggest that vertical space is reserved for the hint so that it popping in/out no longer causes any resizing. This is visually calmer and hence less confusing to users, too.

I've chatted with UX: The jiggle generally is suboptimal. Especially as the input element expands even more once results are visible. However, finding a solid solution for the long run is something that shall be tackled some time in the future by UX.
Until then, I've fixed the movement of the icon 659c97d

warm-coolguy · 2026-02-17T06:36:08Z

src/plugins/addressSearch/types.ts

+	 *
+	 * @defaultValue false
+	 */
+	focusAfterSearch?: boolean


The flag only works when no results were visible prior to a search. Navigations back to the input and starting another search has no focus steal.

Watching the correct getter now 981839f

warm-coolguy · 2026-02-17T06:52:45Z

src/plugins/addressSearch/components/AddressSearch.ce.vue

+					@keydown.down.prevent.stop="inputDown"
+				/>
+				<SmallLoader v-if="isLoading" :style="`right: ${slotPlacement}`" />
+				<button


It is currently not possible to interact with this element with pointer devices.

See #479 (comment)

Fixed 621ba98

warm-coolguy · 2026-02-17T06:59:11Z

src/plugins/addressSearch/components/AddressSearch.ce.vue

@@ -0,0 +1,220 @@
+<template>


When narrowing the map client, the icon starts to tile and the clear button starts to overlap input again.

warm-coolguy · 2026-02-17T07:02:19Z

src/plugins/addressSearch/components/AddressSearch.ce.vue

@@ -0,0 +1,220 @@
+<template>


There's a scrollbar that, probably, shouldn't be there. If you feel like this is a proper solution, please confirm with UI/UX. However, if that stays, we'll have to make scrolling functional on mobile devices. As it is, it's hardly possible to do it at all, since the draggable region is hardly there.

However, even when scrolling completely to the right within the box, the border to the input element never becomes completely visible. The image represents that state.

Of course this was not intended 92a2353

warm-coolguy · 2026-02-17T07:16:20Z

src/plugins/addressSearch/components/AddressSearch.ce.vue

@@ -0,0 +1,220 @@
+<template>


Most of the input element as it visually appears on mobile devices is not clickable with my thumb. That is, I am fumbling around like an idiot and not getting any focus. It seems like I have to click into the left 1/3 of the input. However, since I am right-handed, and my pointer device thumb comes from the right of the screen, I regularly miss the clickable zone.

Seems to be an issue with nineRegions, just like with #479 (comment) and #479 (comment). I'll take a look at it

Edit: Seems to be the same issue as mentioned in #479 (comment), so I'll handle it there.

Fixed 621ba98

warm-coolguy · 2026-02-17T07:18:01Z

examples/iceberg/components/IcebergMap.vue

@@ -29,8 +29,11 @@
 import type { PolarContainer } from '@polar/polar'


On my mobile device, when testing the snowbox, the Please use two fingers ... text no longer appears. I am either not panning the map at all, or I am directly panning with the thumb. This leads me to assume that, once the panning issue is fixed, we'll have scroll traps.

Even though this is a comment on iceberg, I can reproduce the behaviour.
This has nothing to do with this PR though, as the bug already exists on next. Thus, I've created an issue #540

Fixed 621ba98

warm-coolguy · 2026-02-17T07:24:16Z

examples/iceberg/stores/iceberg.ts

@@ -1,10 +1,13 @@
 import {


Differing to the snowbox configuration, the reverse geocoder is no longer configured in this example. It also no longer works in the snowbox, but previously did.

I suggest you configure it in the iceberg client, too, to test whether the two plugins interoperate as expected. After all, AddressSearch♥Pins♥ReverseGeocoder are the three musketeers of figuring out what is where.

The reverse geocoder only works for addresses in Hamburg, thus setting a pin anywhere else won't yield a result. However, I've added the layer for the boundary of Hamburg to remove confusion while also centering the map initally on Hamburg as otherwise the layer is not yet loaded and the pin would be set either way 22dcc9b

However, I've added the reverse geocoder to iceberg, as that should be the client we are testing moving forward 7c47c09

Co-authored-by: Dennis Sen <108349707+warm-coolguy@users.noreply.github.com>

…igure pins in iceberg Also, center the map in both examples on Hamburg so that the boundary layer for the pins is loaded.

…ly available

…n as the latter is a draft

dopenguin · 2026-02-17T20:25:15Z

🏓 @dopenguin

Receive multiple configurations through a secure channel.

Please send multiple configurations through a secure channel.

@warm-coolguy

🏓 @dopenguin

🏓 @warm-coolguy

🏓 @dopenguin https://www.youtube.com/watch?v=GpTPm1R4_AM&t=16s

🏓 @warm-coolguy

🏓 @dopenguin

As discussed, I've adjusted several things

* Opening and closing menus now works via id [d6e2684](https://github.com/Dataport/polar/commit/d6e2684b1585bd081af4d9820aa2da99aec865a2)

* The iconMenu now flows like before in `layout: 'standard'` [fb7f20b](https://github.com/Dataport/polar/commit/fb7f20b463042b6e9d25575ed7cbf6ebc2f1759d), [bf3061f](https://github.com/Dataport/polar/commit/bf3061f933b0e3f308d25fb6e8052e91989a27d3)

* The width of the search is now using a proper maximum [a698276](https://github.com/Dataport/polar/commit/a6982767ca12c490d833b54091d4b1be6a68d509)

* The results are now properly being displayed above other content [110b932](https://github.com/Dataport/polar/commit/110b93239192e75e3879cb4c976b5f54624519ef)

* Clear button and loading indicator are now correctly placed in `layout: 'nineRegions'` [d29a774](https://github.com/Dataport/polar/commit/d29a774228614a2c6d06e4ba28cf6796440ee9a9)

* The search input now a search icon prepended [2943896](https://github.com/Dataport/polar/commit/2943896dc722273b5b7b8247feba9de384f0c564)

🏓 @warm-coolguy

🏓 @dopenguin

🏓 @warm-coolguy

dopenguin added 30 commits November 4, 2025 18:08

refactor(addressSearch): add basic plugin skeleton for migration

eea2927

refactor(core): add addressSearch plugin types

faccb12

refactor(addressSearch): remove bloated files and add new information…

25215ac

… to tsdoc

refactor(addressSearch): migrate locales

95010c8

refactor: add addressSearch to snowbox

1e56a36

refactor(addressSearch): implement basic interface for the address se…

c9cd65a

…arch input

refactor(addressSearch): remove component feature which will not be d…

c39604a

…irectly migrated

refactor(addressSearch): move input value to the store

77c8bef

refactor(addressSearch): update inputValue to be a computed value tha…

b8da24f

…t calls an action on input

refactor(addressSearch): move clear to the store

6fae14a

refactor(addressSearch): implement abortAndRequest and use zero depen…

1c0c478

…dency library just over lodash

refactor(addressSearch): move searchResultSymbols

f20a697

refactor(core): add addressSearch to the general mapConfiguration

624c62f

refactor(addressSearch): add waitMs configuration

629ac2f

Merge branch 'vue3/refactor-enhance-defaulted-configuration' into vue…

2e7a3c0

…3/migrate-plugin-address-search

refactor(addressSearch): move methodContainer

06ba0e8

refactor(addressSearch): reset searchResults in clear action

0077f81

refactor(addressSearch): add missing type

deefa51

refactor(addressSearch): assign methodContainer on setup

64cc447

refactor(addressSearch): rename methodContainer

ac924b9

Merge branch 'vue3/refactor-enhance-defaulted-configuration' into vue…

0a2308a

…3/migrate-plugin-address-search

refactor(addressSearch): re-implement basic search functionality

caeb7ad

Merge branch 'vue3/update-shadows' into vue3/migrate-plugin-address-s…

61bbd59

…earch

Merge branch 'vue3/update-shadows' into vue3/migrate-plugin-address-s…

8526a36

…earch

fix(addressSearch): add missing linebreak

28f4ec5

refactor(addressSearch): add a wrapper and todos in preparation for t…

d647740

…he addition of the results

refactor: update PolarCard to use kern-variables and properly reset h…

ff73491

…eight

refactor(addressSearch): use reusable component PolarCard in AddressS…

195b8c4

…earch as a wrapper

Merge branch 'next' into vue3/migrate-plugin-address-search

060699e

refactor(addressSearch): add skeleton, lots of todos and some migrate…

f0322c3

…d functionality for resultList

dopenguin and others added 4 commits February 16, 2026 14:02

Merge branch 'next' into vue3/migrate-plugin-address-search

73414bd

refactor(addressSearch): use a correct aria label

f91f4e6

fix(addressSearch): remove unused import

10cff89

refactor(iconMenu): change opening of menus to work through id

d6e2684

dopenguin force-pushed the vue3/migrate-plugin-address-search branch from 7d09885 to d6e2684 Compare February 16, 2026 16:28

dopenguin added 2 commits February 16, 2026 17:29

refactor(iconMenu): change direction of menus in standard to behave l…

fb7f20b

…ike nineRegions

fix(iconMenu): adjust name of css class

bf3061f

dopenguin mentioned this pull request Feb 16, 2026

Content can't flow outside the map container #537

Open

dopenguin added 5 commits February 16, 2026 17:56

refactor(core): add export for clientWidth

74cbdf1

fix(addressSearch): add correct max-width to the search container

a698276

fix(addressSearch): display results on top of focus menu items

110b932

fix(addressSearch): correctly place the clear button and small loader…

d29a774

… in nineRegions

refactor(addressSearch): add a prepended search icon

2943896

warm-coolguy requested changes Feb 17, 2026

View reviewed changes

fix(addressSearch): update console statement to new logic

6f11193

Co-authored-by: Dennis Sen <108349707+warm-coolguy@users.noreply.github.com>

dopenguin mentioned this pull request Feb 17, 2026

Pan overlay is not being displayed anymore in nineRegions #540

Closed

dopenguin and others added 9 commits February 17, 2026 12:57

refactor: add reverseGeocoder to iceberg

7c47c09

refactor: add hamburgBorder to services in snowbox and generally conf…

22dcc9b

…igure pins in iceberg Also, center the map in both examples on Hamburg so that the boundary layer for the pins is loaded.

fix(addressSearch): focus first result even if features were previous…

981839f

…ly available

fix(addressSearch): fix placement of search icon and related issues

659c97d

fix(addressSearch): adjust size of input depending on available space

92a2353

fix(addressSearch): adjust label to not use the hint

c76e5d2

fix(addressSearch): use aria-describedby in favour of aria-descriptio…

fab8e64

…n as the latter is a draft

refactor(addressSearch): remove fixed todo

5f48ee6

Merge branch 'next' into vue3/migrate-plugin-address-search

6659597

Merge branch 'next' into vue3/migrate-plugin-address-search

42d9c6a

		@@ -29,8 +29,11 @@
		import type { PolarContainer } from '@polar/polar'

Conversation

dopenguin commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Instructions for local reproduction and review

Caveats

Relevant tickets, issues, et cetera

Uh oh!

dopenguin commented Feb 16, 2026

Uh oh!

warm-coolguy commented Feb 16, 2026

Uh oh!

dopenguin commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

warm-coolguy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dopenguin Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dopenguin Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dopenguin Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dopenguin commented Feb 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dopenguin commented Jan 16, 2026 •

edited

Loading

dopenguin commented Feb 16, 2026 •

edited

Loading

warm-coolguy left a comment •

edited

Loading

dopenguin Feb 17, 2026 •

edited

Loading

dopenguin Feb 17, 2026 •

edited

Loading

dopenguin Feb 17, 2026 •

edited

Loading