Skip to content

fix(Geocoder): throws in custom element context #451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
awesomephant merged 13 commits into from
Jun 29, 2026
Merged

fix(Geocoder): throws in custom element context #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fd49b6d
Add repro
awesomephant Jun 22, 2026
6615761
Restore derived
awesomephant Jun 22, 2026
4df9027
Add workaround
awesomephant Jun 22, 2026
9ae8329
Merge branch 'main' into fix-450
awesomephant Jun 29, 2026
673a919
vendor maplibre-gl-geocoder
awesomephant Jun 29, 2026
a71df5f
drop document.body.contains check
awesomephant Jun 29, 2026
9fb9296
add id prop
awesomephant Jun 29, 2026
c7b3d66
Drop stray underline
awesomephant Jun 29, 2026
542820d
add tests
awesomephant Jun 29, 2026
0c05ef3
Iterate tests
awesomephant Jun 29, 2026
48ac7d3
fix typo
awesomephant Jun 29, 2026
3ada4a8
Add missing type
awesomephant Jun 29, 2026
7b040b6
Consolidate tests
awesomephant Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion components/src/maplibre/Geocoder/Geocoder.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<script lang="ts">
import maplibre from 'maplibre-gl';

import MaplibreGeocoder, {
type CarmenGeojsonFeature,
type MaplibreGeocoderApi
} from '@maplibre/maplibre-gl-geocoder';
} from './maplibre-gl-geocoder';

import { MaptilerGeocoderAPI } from './GeocoderAPIs';

import type { Attachment } from 'svelte/attachments';
Expand All @@ -19,6 +21,7 @@
proximity,
placeholder,
limit = 3,
id = '',
size = 'default',
map
}: GeocoderProps = $props();
Expand All @@ -37,6 +40,7 @@
countries: countriesArr.join(','),
types: typesArr.join(','),
bbox,
id,
trackProximity: !proximity,
proximity,
showResultsWhileTyping: true,
Expand Down
4 changes: 4 additions & 0 deletions components/src/maplibre/Geocoder/GeocoderProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,9 @@ export default interface GeocoderProps {
* Overwrite the default input placeholder
*/
placeholder?: string;
/**
* Optional ID on the input element
*/
id?: string;
size?: 'small' | 'default';
}
303 changes: 153 additions & 150 deletions components/src/maplibre/Geocoder/geocoder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,174 +1,177 @@
:global {
.maplibregl-ctrl-geocoder {
background-color: var(--color-pageFill);
position: relative;
width: 100%;
z-index: 1;
font-family: var(--swr-sans);
font-size: var(--fs-base);
border: 1px solid var(--color-textSecondary);

.small & {
font-size: var(--fs-small-1);
}

button {
cursor: pointer;
}
* {
box-sizing: border-box;
}
:global {
.maplibregl-ctrl-geocoder {
background-color: var(--color-pageFill);
position: relative;
width: 100%;
z-index: 1;
font-family: var(--swr-sans);
font-size: var(--fs-base);
border: 1px solid var(--color-textSecondary);

.small & {
font-size: var(--fs-small-1);
}

.maplibre-gl-geocoder--error {
font-size: var(--fs-small-2);
color: var(--color-textSecondary);
padding: 0.4em 0.65em;
button {
cursor: pointer;
}

.maplibregl-ctrl-geocoder--input {
height: 100%;
font-family: inherit;
font-size: inherit;
background-color: transparent;
color: var(--color-textPrimary);
border: 0;
height: 2em;
padding: 0 1.85em;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
appearance: none;
}
* {
box-sizing: border-box;
}
}

.maplibregl-ctrl-geocoder--input::placeholder {
opacity: 1;
color: var(--color-textSecondary);
}
.maplibregl-ctrl-geocoder--input:focus {
color: var(--color-textPrimary);
outline: 0;
}
.maplibre-gl-geocoder--error {
font-size: var(--fs-small-2);
color: var(--color-textSecondary);
padding: 0.4em 0.65em;
}

.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
display: none;
position: absolute;
z-index: 2;
right: 0.5em;
top: 50%;
transform: translateY(-50%);
border: 0;
.maplibregl-ctrl-geocoder--input {
height: 100%;
font-family: inherit;
font-size: inherit;
background-color: transparent;
color: var(--color-textPrimary);
border: 0;
height: 2em;
padding: 0 1.85em;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
appearance: none;
}
}

/* Suggestions */
.maplibregl-ctrl-geocoder .suggestions {
background: var(--color-pageFill);
border: 1px solid var(--color-textSecondary);
left: -1px;
list-style: none;
position: absolute;
width: calc(100% + 2px);
top: 100%;
z-index: 1000;
overflow: hidden;
}
.maplibregl-ctrl-geocoder--input::placeholder {
opacity: 1;
color: var(--color-textSecondary);
}
.maplibregl-ctrl-geocoder--input:focus {
color: var(--color-textPrimary);
outline: 0;
}

.maplibregl-ctrl-bottom-left .suggestions,
.maplibregl-ctrl-bottom-right .suggestions {
top: auto;
bottom: 100%;
}
.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
display: none;
position: absolute;
z-index: 2;
right: 0.5em;
top: 50%;
transform: translateY(-50%);
border: 0;
}

.maplibregl-ctrl-geocoder .suggestions > li > a {
cursor: default;
display: block;
font-size: var(--fs-small-1);
padding: 0.7em 0.75em;
padding-bottom: 0.65em;
border-bottom: 1px solid var(--color-surfaceBorder);
.small & {
padding: 0.65em 0.7em;
/* Suggestions */
.maplibregl-ctrl-geocoder .suggestions {
background: var(--color-pageFill);
border: 1px solid var(--color-textSecondary);
left: -1px;
list-style: none;
position: absolute;
width: calc(100% + 2px);
top: 100%;
z-index: 1000;
overflow: hidden;
}

.maplibregl-ctrl-bottom-left .suggestions,
.maplibregl-ctrl-bottom-right .suggestions {
top: auto;
bottom: 100%;
}

.maplibregl-ctrl-geocoder .suggestions > li > a {
cursor: default;
display: block;
font-size: var(--fs-small-1);
padding: 0.7em 0.75em;
padding-bottom: 0.65em;
text-decoration: none;
border-bottom: 1px solid var(--color-surfaceBorder);
.small & {
padding: 0.65em 0.7em;
padding-bottom: 0.6em;
}
}
.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
border-bottom: 0;
}
}
.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
border-bottom: 0;
}

.maplibregl-ctrl-geocoder .suggestions > .active > a,
.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
background: var(--color-surfaceHover);
text-decoration: none;
cursor: pointer;
}
.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
text-decoration: underline;
}
.maplibregl-ctrl-geocoder .suggestions > .active > a,
.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
background: var(--color-surfaceHover);
text-decoration: none;
cursor: pointer;
}
.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
text-decoration: underline;
text-underline-offset: 0.2em;
}

.maplibregl-ctrl-geocoder--suggestion {
display: flex;
flex-direction: row;
align-items: center;
}
.maplibregl-ctrl-geocoder--suggestion {
display: flex;
flex-direction: row;
align-items: center;
}

.maplibregl-ctrl-geocoder--suggestion-info {
display: flex;
flex-direction: column;
}
.maplibregl-ctrl-geocoder--suggestion-info {
display: flex;
flex-direction: column;
}

.maplibregl-ctrl-geocoder--suggestion-title,
.maplibregl-ctrl-geocoder--suggestion-address,
.maplibregl-ctrl-geocoder--result-address {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.maplibregl-ctrl-geocoder--suggestion-title,
.maplibregl-ctrl-geocoder--suggestion-address,
.maplibregl-ctrl-geocoder--result-address {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.maplibregl-ctrl-geocoder--result-icon {
display: none;
}
.maplibregl-ctrl-geocoder--result-title {
color: var(--color-textPrimary);
font-weight: 600;
letter-spacing: 0;
.small & {
font-size: var(--fs-small-2);
letter-spacing: 0.01em;
}
}
.maplibregl-ctrl-geocoder--result-address {
.maplibregl-ctrl-geocoder--result-icon {
display: none;
}
.maplibregl-ctrl-geocoder--result-title {
color: var(--color-textPrimary);
font-weight: 600;
letter-spacing: 0;
.small & {
font-size: var(--fs-small-2);
color: var(--color-textSecondary);
line-height: 1.3;
letter-spacing: 0.01em;
}
}
.maplibregl-ctrl-geocoder--result-address {
font-size: var(--fs-small-2);
color: var(--color-textSecondary);
line-height: 1.3;
}

.maplibregl-ctrl-geocoder--icon {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
path {
fill: var(--color-textPrimary);
}
.maplibregl-ctrl-geocoder--icon {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
path {
fill: var(--color-textPrimary);
}
}

.maplibregl-ctrl-geocoder--icon-close {
right: .25em;
height: 1.15em;
opacity: 0.65;
&:hover, &:focus-visible {
opacity: 1;
}
}
.maplibregl-ctrl-geocoder--icon-search {
left: 0.4em;
height: 1.25em;
top: 51%; // optical correction
width: auto;
.maplibregl-ctrl-geocoder--icon-close {
right: 0.25em;
height: 1.15em;
opacity: 0.65;
&:hover,
&:focus-visible {
opacity: 1;
}
}
.maplibregl-ctrl-geocoder--icon-search {
left: 0.4em;
height: 1.25em;
top: 51%; // optical correction
width: auto;
}
}
15 changes: 15 additions & 0 deletions components/src/maplibre/Geocoder/maplibre-gl-geocoder/LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
Copyright (c) 2021 MapLibre contributors

Copyright (c) 2016, Mapbox

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
Loading
Loading