<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <script>
      globalThis.onUI5Init = () => sap.ui.require([
        "sap/ui/core/mvc/XMLView",
        "sap/ui/model/json/JSONModel",
        "my/demo/control/Input"
      ], (XMLView, JSONModel) => {
        "use strict";

        return XMLView.create({
          definition: `<mvc:View
            xmlns:mvc="sap.ui.core.mvc"
            xmlns:my="my.demo.control"
            xmlns="sap.m"
            displayBlock="true"
          >
            <App>
              <Page showHeader="false">
                <Table keyboardMode="Edit">
                  <columns>
                    <Column>
                      <Text text="Edit Mode" />
                    </Column>
                  </columns>
                  <ColumnListItem>
                    <my:Input value="{/value}" />
                  </ColumnListItem>
                  <ColumnListItem>
                    <my:Input editable="false" value="{/value}" />
                  </ColumnListItem>
                  <ColumnListItem>
                    <my:Input
                      type="Number"
                      value="1234"
                      fieldWidth="7rem"
                      textAlign="End"
                      description="Works also with type=&#34;Number&#34;"
                    />
                  </ColumnListItem>
                </Table>
              </Page>
            </App>
          </mvc:View>`,
          height: "100%",
          models: new JSONModel({
            value: "Select text on focus"
          }),
        }).then(view => view.placeAt("content"));
      });
    </script>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
      data-sap-ui-resourceRoots='{ "my.demo": "./" }'
      data-sap-ui-async="true"
      data-sap-ui-onInit="onUI5Init"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-excludeJQueryCompat="true"
    ></script>
  </head>
  <body id="content" class="sapUiBody"></body>
</html>
sap.ui.define([
  "sap/m/Input",
  "sap/m/InputRenderer", // preload renderer to avoid sync XHR
], (Input, InputRenderer) => {
  "use strict";

  return Input.extend("my.demo.control.Input", {
    onfocusin: function() {
      if (typeof Input.prototype.onfocusin == "function") {
        Input.prototype.onfocusin.apply(this, arguments);
      }
      this.getDomRef("inner").select(); // ... instead of `this.selectText(iStart, iEnd)` which doesn't support input elements with `type="number"`. See https://html.spec.whatwg.org/multipage/input.html#input-type-attr-summary
    },

    renderer: InputRenderer,
  });
});