Allow negative number entry on iOS when the number selector has no min

The iOS workaround from #52925 only applied when the selector had an
explicit negative min. The numeric threshold selector used by the power
triggers passes a number selector without a min, so the digit-only keypad
(without a minus key) was still shown. Treat a missing min as allowing
negatives too.

Also leave inputmode unset instead of forcing "text": on a number input
iOS then shows the Numbers and Punctuation keyboard, which has a minus
key and fits numeric entry better than the full QWERTY keyboard.

Fixes #53747

build-scripts/gulp/gather-static.js

@@ -108,10 +108,6 @@ async function copyMapPanel(staticDir) {
   // Style, glyphs and sprites for the vector base map
   await ensureMapAssets();
   fs.copySync(mapAssetsDir, staticPath("map/"));
-  copyFileDir(
-    npmPath("@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js"),
-    staticPath("map/")
-  );
 }
 
 function copyZXingWasm(staticDir) {

package.json

@@ -75,7 +75,6 @@
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
     "@lit/task": "1.0.3",
-    "@mapbox/mapbox-gl-rtl-text": "0.4.0",
     "@maplibre/maplibre-gl-leaflet": "0.1.4",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",

src/common/map/base-layer.ts

@@ -1,6 +1,6 @@
 import type { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
 import type { Map as LeafletMap } from "leaflet";
-import type { setRTLTextPlugin, StyleSpecification } from "maplibre-gl";
+import type { StyleSpecification } from "maplibre-gl";
 import type { LeafletModuleType } from "../dom/setup-leaflet-map";
 
 // Shortbread vector tiles from the OpenStreetMap Foundation. Only their tile
@@ -13,10 +13,6 @@ const VECTOR_STYLES = {
   dark: "/static/map/dark.json",
 } as const;
 
-// Without it Arabic and Hebrew labels render reversed. Loaded by MapLibre's
-// worker, hence a URL rather than an import.
-const RTL_TEXT_PLUGIN_URL = "/static/map/mapbox-gl-rtl-text.js";
-
 // Fallback for browsers without WebGL2, which MapLibre needs even for raster,
 // so it stays a Leaflet tile layer. Still CARTO, and temporarily so: OSM's
 // raster blocks a browser that sends no Referer, and the only referrer a browser
@@ -75,20 +71,6 @@ const loadStyle = async (url: string): Promise<StyleSpecification> => {
   return style;
 };
 
-// Global to MapLibre, and it throws when set twice.
-let rtlTextPluginRequested = false;
-const ensureRTLTextPlugin = (setPlugin: typeof setRTLTextPlugin) => {
-  if (rtlTextPluginRequested) {
-    return;
-  }
-  rtlTextPluginRequested = true;
-  setPlugin(new URL(RTL_TEXT_PLUGIN_URL, location.href).href, true).catch(
-    () => {
-      // RTL labels stay reversed; everything else still renders.
-    }
-  );
-};
-
 const createVectorLayer = async (
   createLayer: typeof maplibreGL,
   leaflet: LeafletModuleType,
@@ -229,11 +211,8 @@ export const createBaseLayer = async (
   if (supportsWebGL2()) {
     let vectorLayer: MapBaseLayer | undefined;
     try {
-      const [{ maplibreGL: createLayer }, maplibre] = await Promise.all([
-        import("@maplibre/maplibre-gl-leaflet"),
-        import("maplibre-gl"),
-      ]);
-      ensureRTLTextPlugin(maplibre.setRTLTextPlugin);
+      const { maplibreGL: createLayer } =
+        await import("@maplibre/maplibre-gl-leaflet");
       vectorLayer = await createVectorLayer(
         createLayer,
         leaflet,

src/components/ha-selector/ha-selector-number.ts

@@ -67,15 +67,16 @@ export class HaNumberSelector extends LitElement {
       }
     }
 
-    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key,
-    // so negatives can only be typed with the full "text" keyboard. Other
-    // platforms include a minus on their number keypads, so restrict this
-    // workaround to Safari/WebKit and only when the selector allows negatives
-    // (e.g. numeric_state triggers/conditions).
-    const useTextInputMode =
+    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key.
+    // Leaving inputmode unset on a number input gives the "Numbers and
+    // Punctuation" keyboard there, which does include a minus. Other platforms
+    // include a minus on their number keypads, so restrict this workaround to
+    // Safari/WebKit and only when the selector allows negatives: either an
+    // explicit negative min, or no min at all (e.g. the numeric threshold
+    // selector used by the power triggers).
+    const useSafariNegativeKeyboard =
       isSafari &&
-      this.selector.number?.min !== undefined &&
-      this.selector.number.min < 0;
+      (this.selector.number?.min === undefined || this.selector.number.min < 0);
 
     const translationKey = this.selector.number?.translation_key;
     let unit = this.selector.number?.unit_of_measurement;
@@ -112,8 +113,8 @@ export class HaNumberSelector extends LitElement {
         }
         <ha-input
           .inputmode=${
-            useTextInputMode
-              ? "text"
+            useSafariNegativeKeyboard
+              ? undefined
               : this.selector.number?.step === "any" ||
                   (this.selector.number?.step ?? 1) % 1 !== 0
                 ? "decimal"

test/common/map/base-layer.test.ts

@@ -18,10 +18,6 @@ const maplibreGL = vi.hoisted(() => vi.fn(() => maplibreLayer));
 
 vi.mock("@maplibre/maplibre-gl-leaflet", () => ({ maplibreGL }));
 
-const setRTLTextPlugin = vi.hoisted(() => vi.fn(async () => undefined));
-
-vi.mock("maplibre-gl", () => ({ setRTLTextPlugin }));
-
 const STYLE = {
   version: 8,
   sources: {},
@@ -113,18 +109,6 @@ describe("createBaseLayer", () => {
     browser.retina = false;
   });
 
-  it("registers the RTL text plugin once, lazily, from our own host", async () => {
-    const createBaseLayer = await setWebGL2(true);
-    await createBaseLayer(leaflet, map, false);
-    await createBaseLayer(leaflet, map, false);
-
-    expect(setRTLTextPlugin).toHaveBeenCalledOnce();
-    expect(setRTLTextPlugin).toHaveBeenCalledWith(
-      `${location.origin}/static/map/mapbox-gl-rtl-text.js`,
-      true
-    );
-  });
-
   it("uses vector tiles when WebGL2 is available", async () => {
     const createBaseLayer = await setWebGL2(true);
 

yarn.lock

@@ -3502,13 +3502,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/mapbox-gl-rtl-text@npm:0.4.0":
-  version: 0.4.0
-  resolution: "@mapbox/mapbox-gl-rtl-text@npm:0.4.0"
-  checksum: 10/a678240e4cc6f589726ef2f35fac64a7eb073451a8686c09db58041d3fb351d2e72100bb12607591efc298d8ac5e19691c593b3c213d121b2a0e84978254e1a8
-  languageName: node
-  linkType: hard
-
 "@mapbox/point-geometry@npm:^1.1.0, @mapbox/point-geometry@npm:~1.1.0":
   version: 1.1.0
   resolution: "@mapbox/point-geometry@npm:1.1.0"
@@ -10155,7 +10148,6 @@ __metadata:
     "@lit/reactive-element": "npm:2.1.2"
     "@lit/task": "npm:1.0.3"
     "@lokalise/node-api": "npm:16.3.0"
-    "@mapbox/mapbox-gl-rtl-text": "npm:0.4.0"
     "@maplibre/maplibre-gl-leaflet": "npm:0.1.4"
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch"
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"