Bump jest from 26.6.3 to 27.0.6

Bumps [jest](https://github.com/facebook/jest) from 26.6.3 to 27.0.6. - [Release notes](https://github.com/facebook/jest/releases) - [Changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md) - [Commits](https://github.com/facebook/jest/compare/v26.6.3...v27.0.6) --- updated-dependencies: - dependency-name: jest dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
Update pull_request_dependabot.yml
2026-07-14 00:00:06 +08:00 · 2021-08-02 10:02:50 +00:00 · 2021-08-02 03:00:30 -07:00 · 2021-08-02 02:48:22 -07:00 · 2021-08-02 02:43:53 -07:00 · 2021-08-02 01:54:02 -07:00
29 changed files with 7048 additions and 4739 deletions
@@ -0,0 +1,10 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+    timezone: America/Montreal
+  open-pull-requests-limit: 10
+  versioning-strategy: increase
@@ -1,5 +1,12 @@
 name: Build
-on: [push]
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**

 jobs:
  build:
@@ -4,6 +4,10 @@ on:
  push:
    branches:
      - master
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**

 jobs:
  publish:
@@ -1,9 +1,10 @@
-name: Build PR
+name: Build PR (Standard)
 on: [pull_request]

 jobs:
  build:
    runs-on: ${{ matrix.os }}
+    if: ${{ github.actor != 'dependabot[bot]' && !contains(github.event.pull_request.labels.*.name, 'dependencies') }}
    strategy:
      matrix:
        node-version: [12.x]
@@ -17,8 +18,6 @@ jobs:
    - name: npm install, build, and test
      run: |
        npm install
-        npm run start -- --testMode
-        npm run demo
        npm run coverage
      env:
        CI: true
@@ -0,0 +1,38 @@
+name: Build PR (Dependabot)
+
+on:
+  pull_request_target
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    if: contains(github.event.pull_request.labels.*.name, 'dependencies')
+    strategy:
+      matrix:
+        node-version: [12.x]
+        os: [ubuntu-latest]
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node_version }}
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm run coverage
+      env:
+        CI: true
+    - name: Merge PR
+      if: success()
+      uses: "pascalgn/automerge-action@v0.14.2"
+      env:
+        GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+        MERGE_LABELS: "dependencies"
+    - name: Reject PR
+      if: failure()
+      uses: peter-evans/close-pull@v1
+      with:
+        pull-request-number: ${{github.event.number}}
+        comment: PR closed due to failing tests
+        delete-branch: true
@@ -1,6 +1,6 @@
 <p>
  <a href="https://simple-keyboard.com/demo">
-	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
+	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/PrpbdIu.png">
  </a>
 	
  <a href="https://www.npmjs.com/package/simple-keyboard">
@@ -14,33 +14,25 @@
  <a href="https://github.com/hodgef/simple-keyboard/actions">
     <img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg?color=green" />
  </a>
-
-  <a href="https://bundlephobia.com/result?p=simple-keyboard">
-    <img src="https://badgen.net/bundlephobia/minzip/simple-keyboard/?color=green" alt="install size">
-  </a>
  
  <a href="https://david-dm.org/hodgef/simple-keyboard">
    <img src="https://badgen.net/david/dep/hodgef/simple-keyboard" alt="coverage">
  </a>
-
-  <a href="https://codecov.io/gh/hodgef/simple-keyboard">
-    <img src="https://badgen.net/codecov/c/github/hodgef/simple-keyboard" alt="coverage">
-  </a>
 </p>

 <blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>

-## Demo 🚀
+## 🚀 Demo

 [Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)

-## Installation & Usage 📦
+## 📦 Installation & Usage

 You can use simple-keyboard as a `<script>` tag from a CDN, or install it from npm.

 Check out the [Getting Started](https://simple-keyboard.com/getting-started) docs to begin.

-## Documentation 📖
+## 📖 Documentation

 Check out the [simple-keyboard documentation](https://simple-keyboard.com/documentation) site.

@@ -63,7 +55,7 @@ Feel free to browse the [Questions & Answers (FAQ)](https://simple-keyboard.com/

 <a href="https://discordapp.com/invite/SJexsCG" title="Join our Discord chat" target="_blank"><img src="https://discordapp.com/api/guilds/498978399801573396/widget.png?style=banner2" align="center"></a>

-## Modules ✳️
+## ✳️ Modules

 You can extend simple-keyboard's functionality with [modules](https://hodgef.com/simple-keyboard/modules/). Such as:

@@ -74,7 +66,7 @@ You can extend simple-keyboard's functionality with [modules](https://hodgef.com

 Want to create your own module? Check out the [Modules page](https://hodgef.com/simple-keyboard/modules/) for instructions.

-## Compatibility 🎯
+## 🎯 Compatibility

 - Internet Explorer 11
 - Edge (Spartan) 16+
@@ -84,7 +76,7 @@ Want to create your own module? Check out the [Modules page](https://hodgef.com/
 - Firefox 57+
 - iOS 9+

-## Contributing ✅
+## ✅ Contributing

 PRs and issues are always welcome. Feel free to submit any issues you have at:
 [https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)
@@ -1,6 +1,6 @@
 /*!
 * 
- *   simple-keyboard v3.0.0
+ *   simple-keyboard v3.2.32
 *   https://github.com/hodgef/simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
@@ -8,4 +8,4 @@
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
- */.hg-theme-default{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;background-color:#ececec;padding:5px;border-radius:5px}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{display:inline-flex;border-radius:5px;position:absolute;background:#ececec;border-bottom:2px solid #b5b5b5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:272px;transform:translateY(-100%);margin-top:-10px}ul.hg-candidate-box-list{display:flex;list-style:none;padding:0;margin:0;flex:1}li.hg-candidate-box-list-item{height:40px;width:40px;display:flex;align-items:center;justify-content:center}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{display:flex;align-items:center;padding:0 10px;background:#d0d0d0;color:#969696;cursor:pointer}.hg-candidate-box-next{border-top-right-radius:5px;border-bottom-right-radius:5px}.hg-candidate-box-prev{border-top-left-radius:5px;border-bottom-left-radius:5px}.hg-candidate-box-btn-active{color:#444}
+ */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row .hg-button-container{margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;max-width:272px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;background:#d0d0d0;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}
@@ -13,8 +13,8 @@ declare class SimpleKeyboard {
    input: KeyboardInput;
    options: KeyboardOptions;
    utilities: any;
-    caretPosition: number;
-    caretPositionEnd: number;
+    caretPosition: number | null;
+    caretPositionEnd: number | null;
    keyboardDOM: KeyboardElement;
    keyboardPluginClasses: string;
    keyboardDOMClass: string;
@@ -34,8 +34,10 @@ declare class SimpleKeyboard {
    holdTimeout: number;
    isMouseHold: boolean;
    initialized: boolean;
-    candidateBox: CandidateBox;
+    candidateBox: CandidateBox | null;
    keyboardRowsDOM: KeyboardElement;
+    defaultName: string;
+    activeInputElement: HTMLInputElement | HTMLTextAreaElement | null;
    /**
     * Creates an instance of SimpleKeyboard
     * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
@@ -47,20 +49,20 @@ declare class SimpleKeyboard {
    handleParams: (params: KeyboardParams) => {
        keyboardDOMClass: string;
        keyboardDOM: KeyboardElement;
-        options: Partial<KeyboardOptions>;
+        options: Partial<KeyboardOptions | undefined>;
    };
    /**
     * Getters
     */
    getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
    /**
     * Changes the internal caret position
     * @param {number} position The caret's start position
     * @param {number} positionEnd The caret's end position
     */
-    setCaretPosition(position: number, endPosition?: number): void;
+    setCaretPosition(position: number | null, endPosition?: number | null): void;
    /**
     * Retrieve the candidates for a given input
     * @param input The input string to check
@@ -104,7 +106,7 @@ declare class SimpleKeyboard {
     * Clear the keyboard’s input.
     * @param {string} [inputName] optional - the internal input to select
     */
-    clearInput(inputName: string): void;
+    clearInput(inputName?: string): void;
    /**
     * Get the keyboard’s input (You can also get it from the onChange prop).
     * @param  {string} [inputName] optional - the internal input to select
@@ -166,7 +168,7 @@ declare class SimpleKeyboard {
     * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
     * @param  {string} button The button layout name to select
     */
-    getButtonElement(button: string): KeyboardElement | KeyboardElement[];
+    getButtonElement(button: string): KeyboardElement | KeyboardElement[] | undefined;
    /**
     * This handles the "inputPattern" option
     * by checking if the provided inputPattern passes
@@ -196,6 +198,10 @@ declare class SimpleKeyboard {
     * Event Handler: Select
     */
    handleSelect(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: SelectionChange
+     */
+    handleSelectionChange(event: KeyboardHandlerEvent): void;
    /**
     * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
     */
@@ -3,10 +3,10 @@ import Utilities from "./services/Utilities";
 export interface KeyboardLayoutObject {
    [key: string]: string[];
 }
-export interface KeyboardButtonTheme {
+export declare type KeyboardButtonTheme = {
    class: string;
    buttons: string;
-}
+} | null;
 export interface KeyboardButtonAttributes {
    attribute: string;
    value: string;
@@ -22,26 +22,28 @@ export declare type CandidateBoxParams = {
 export declare type CandidateBoxShowParams = {
    candidateValue: string;
    targetElement: KeyboardElement;
-    onSelect: (selectedCandidate: string) => void;
+    onSelect: (selectedCandidate: string, e: MouseEvent) => void;
 };
 export declare type CandidateBoxRenderParams = {
    candidateListPages: string[][];
    targetElement: KeyboardElement;
    pageIndex: number;
    nbPages: number;
-    onItemSelected: (selectedCandidate: string) => void;
+    onItemSelected: (selectedCandidate: string, e: MouseEvent) => void;
 };
 export declare type KeyboardElement = HTMLDivElement | HTMLButtonElement;
-export declare type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & {
-    target: HTMLDivElement & HTMLInputElement;
-};
+export declare type KeyboardHandlerEvent = any;
 export interface KeyboardButtonElements {
    [key: string]: KeyboardElement[];
 }
 export interface UtilitiesParams {
    getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
+    dispatch: any;
+}
+export interface PhysicalKeyboardParams {
+    getOptions: () => KeyboardOptions;
    dispatch: any;
 }
 export interface KeyboardOptions {
@@ -106,9 +108,15 @@ export interface KeyboardOptions {
     */
    physicalKeyboardHighlight?: boolean;
    /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
     */
    physicalKeyboardHighlightPress?: boolean;
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
    /**
     * Define the text color that the physical keyboard highlighted key should have.
     */
@@ -193,6 +201,14 @@ export interface KeyboardOptions {
     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
     */
    onInit?: (instance?: SimpleKeyboard) => void;
+    /**
+     * Retrieves the current input
+     */
+    onChange?: (input: string, e?: MouseEvent) => any;
+    /**
+     * Retrieves all inputs
+     */
+    onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any;
    /**
     * Module options can have any format
     */
@@ -1,4 +1,4 @@
-import { KeyboardOptions, UtilitiesParams } from "../interfaces";
+import { KeyboardOptions, PhysicalKeyboardParams } from "../interfaces";
 /**
 * Physical Keyboard Service
 */
@@ -8,7 +8,7 @@ declare class PhysicalKeyboard {
    /**
     * Creates an instance of the PhysicalKeyboard service
     */
-    constructor({ dispatch, getOptions }: Partial<UtilitiesParams>);
+    constructor({ dispatch, getOptions }: PhysicalKeyboardParams);
    handleHighlightKeyDown(event: KeyboardEvent): void;
    handleHighlightKeyUp(event: KeyboardEvent): void;
    /**
@@ -16,5 +16,9 @@ declare class PhysicalKeyboard {
     * @param  {object} event The KeyboardEvent
     */
    getSimpleKeyboardLayoutKey(event: KeyboardEvent): string;
+    /**
+     * Retrieve key from keyCode
+     */
+    keyCodeToKey(keyCode: number): string | undefined;
 }
 export default PhysicalKeyboard;
@@ -5,8 +5,8 @@ import { KeyboardOptions, UtilitiesParams } from "../interfaces";
 */
 declare class Utilities {
    getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
    dispatch: any;
    maxLengthReached: boolean;
    /**
@@ -72,6 +72,7 @@ declare class Utilities {
        "{home}": string;
        "{pageup}": string;
        "{delete}": string;
+        "{forwarddelete}": string;
        "{end}": string;
        "{pagedown}": string;
        "{numpadmultiply}": string;
@@ -122,7 +123,7 @@ declare class Utilities {
     * @param  {number} length Represents by how many characters the input should be moved
     * @param  {boolean} minus Whether the cursor should be moved to the left or not.
     */
-    updateCaretPosAction(length: number, minus?: boolean): number;
+    updateCaretPosAction(length: number, minus?: boolean): number | null;
    /**
     * Adds a string to the input at a given position
     *
@@ -133,20 +134,31 @@ declare class Utilities {
     */
    addStringAt(source: string, str: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
    /**
-     * Removes an amount of characters at a given position
+     * Check whether the button is a standard button
+     */
+    isStandardButton: (button: string) => boolean | "";
+    /**
+     * Removes an amount of characters before a given position
     *
     * @param  {string} source The source input
     * @param  {number} position The (cursor) position from where the characters should be removed
     * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
     */
    removeAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
+    /**
+     * Removes an amount of characters after a given position
+     *
+     * @param  {string} source The source input
+     * @param  {number} position The (cursor) position from where the characters should be removed
+     */
+    removeForwardsAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
    /**
     * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
     *
     * @param  {object} inputObj
     * @param  {string} updatedInput
     */
-    handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean;
+    handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean | undefined;
    /**
     * Gets the current value of maxLengthReached
     */
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "3.0.0",
+  "version": "3.2.32",
  "description": "On-screen Javascript Virtual Keyboard",
  "main": "build/index.js",
  "types": "build/types/index.d.ts",
@@ -39,38 +39,38 @@
  ],
  "license": "MIT",
  "devDependencies": {
-    "@babel/cli": "^7.13.0",
-    "@babel/core": "^7.13.8",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.14.8",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-typescript": "^7.14.6",
    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.13.9",
-    "@types/jest": "^26.0.20",
-    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.16.1",
-    "autoprefixer": "^10.2.5",
+    "@babel/preset-env": "^7.14.8",
+    "@types/jest": "^26.0.24",
+    "@typescript-eslint/eslint-plugin": "^4.28.5",
+    "@typescript-eslint/parser": "^4.28.5",
+    "autoprefixer": "^10.3.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "babel-preset-minify": "^0.5.0",
-    "core-js": "^3.9.1",
-    "css-loader": "^5.1.1",
-    "eslint": "^7.21.0",
+    "core-js": "^3.16.0",
+    "css-loader": "^6.2.0",
+    "eslint": "^7.31.0",
    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.0",
-    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.3.9",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss": "^8.2.8",
-    "postcss-loader": "^5.2.0",
-    "prettier": "^2.2.1",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.0.6",
+    "mini-css-extract-plugin": "^2.1.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "prettier": "^2.3.2",
    "prettier-webpack-plugin": "^1.2.0",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^4.2.3",
+    "style-loader": "^3.2.1",
+    "terser-webpack-plugin": "^5.1.4",
+    "typescript": "^4.3.5",
    "url-loader": "^4.1.1",
-    "webpack": "^5.24.3",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "4.0.0-beta.0"
+    "webpack": "^5.40.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "4.0.0-rc.0"
  },
  "jest": {
    "roots": [
@@ -81,7 +81,7 @@
      "!src/**/*.d.ts",
      "!src/lib/index.js",
      "!src/lib/polyfills.js",
-      "!src/demo/index.js",
+      "!src/demo/**",
      "!src/utils/**",
      "!src/**/*.d.ts",
      "!**/tests/**"
@@ -0,0 +1,81 @@
+import Keyboard from "../lib";
+import "./css/CandidateBoxDemo.css";
+
+const setDOM = () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      preventMouseDownDefault: true,
+      layoutCandidates: {
+        ni: "你 尼",
+        hao: "好 号"
+      }
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    const inputElement = document.querySelector(".input");
+
+    /**
+     * Updating input's value
+     */
+    inputElement.value = input;
+    console.log("Input changed", input);
+
+    /**
+     * Synchronizing input caret position
+     */
+    const caretPosition = this.keyboard.caretPosition;
+    if (caretPosition !== null)
+      this.setInputCaretPosition(inputElement, caretPosition);
+
+    console.log("caretPosition", caretPosition);
+  }
+
+  setInputCaretPosition(elem, pos) {
+    if (elem.setSelectionRange) {
+      elem.focus();
+      elem.setSelectionRange(pos, pos);
+    }
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;
@@ -0,0 +1,12 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}
@@ -9,6 +9,7 @@ import BasicDemo from "./BasicDemo";
 //import DOMElementDemo from "./DOMElementDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";
 //import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
+//import CandidateBoxDemo from "./CandidateBoxDemo";

 /**
 * Selected demo
@@ -0,0 +1,36 @@
+import { setDOM } from '../../utils/TestUtility';
+import CandidateBoxDemo from '../CandidateBoxDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new CandidateBoxDemo();
+});
+
+it('Demo caret positioning will adjust accordingly', () => {
+  setDOM();
+
+  const demo = new CandidateBoxDemo();
+
+  demo.keyboard.setCaretPosition(0);
+
+  demo.keyboard.getButtonElement("n").click();
+  demo.keyboard.getButtonElement("h").click();
+  demo.keyboard.getButtonElement("a").click();
+  demo.keyboard.getButtonElement("o").click();
+  expect(demo.keyboard.getCaretPosition()).toBe(4);
+
+  demo.keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(2);
+
+  demo.keyboard.setCaretPosition(1);
+  demo.keyboard.getButtonElement("i").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(2);
+
+  demo.keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(1);
+  expect(demo.keyboard.getInput()).toBe("你好");
+});
@@ -9,7 +9,7 @@ import {

 class CandidateBox {
  utilities: Utilities;
-  candidateBoxElement: HTMLDivElement;
+  candidateBoxElement!: HTMLDivElement;
  pageIndex = 0;
  pageSize;

@@ -45,8 +45,8 @@ class CandidateBox {
      targetElement,
      pageIndex: this.pageIndex,
      nbPages: candidateListPages.length,
-      onItemSelected: (selectedCandidate: string) => {
-        onSelect(selectedCandidate);
+      onItemSelected: (selectedCandidate: string, e: MouseEvent) => {
+        onSelect(selectedCandidate, e);
        this.destroy();
      },
    });
@@ -73,9 +73,18 @@ class CandidateBox {
    // Create Candidate box list items
    candidateListPages[pageIndex].forEach((candidateListItem) => {
      const candidateListLIElement = document.createElement("li");
+      const getMouseEvent = () => {
+        const mouseEvent = new MouseEvent("click");
+        Object.defineProperty(mouseEvent, "target", {
+          value: candidateListLIElement,
+        });
+        return mouseEvent;
+      };
+
      candidateListLIElement.className = "hg-candidate-box-list-item";
      candidateListLIElement.textContent = candidateListItem;
-      candidateListLIElement.onclick = () => onItemSelected(candidateListItem);
+      candidateListLIElement.onclick = (e = getMouseEvent()) =>
+        onItemSelected(candidateListItem, e);

      // Append list item to ul
      candidateListULElement.appendChild(candidateListLIElement);
@@ -22,28 +22,30 @@ import CandidateBox from "./CandidateBox";
 * - Handles button functionality
 */
 class SimpleKeyboard {
-  input: KeyboardInput;
-  options: KeyboardOptions;
+  input!: KeyboardInput;
+  options!: KeyboardOptions;
  utilities: any;
-  caretPosition: number;
-  caretPositionEnd: number;
-  keyboardDOM: KeyboardElement;
-  keyboardPluginClasses: string;
-  keyboardDOMClass: string;
-  buttonElements: KeyboardButtonElements;
-  currentInstanceName: string;
-  allKeyboardInstances: { [key: string]: SimpleKeyboard };
-  keyboardInstanceNames: string[];
-  isFirstKeyboardInstance: boolean;
-  physicalKeyboard: PhysicalKeyboard;
-  modules: { [key: string]: any };
-  activeButtonClass: string;
-  holdInteractionTimeout: number;
-  holdTimeout: number;
-  isMouseHold: boolean;
-  initialized: boolean;
-  candidateBox: CandidateBox;
-  keyboardRowsDOM: KeyboardElement;
+  caretPosition!: number | null;
+  caretPositionEnd!: number | null;
+  keyboardDOM!: KeyboardElement;
+  keyboardPluginClasses!: string;
+  keyboardDOMClass!: string;
+  buttonElements!: KeyboardButtonElements;
+  currentInstanceName!: string;
+  allKeyboardInstances!: { [key: string]: SimpleKeyboard };
+  keyboardInstanceNames!: string[];
+  isFirstKeyboardInstance!: boolean;
+  physicalKeyboard!: PhysicalKeyboard;
+  modules!: { [key: string]: any };
+  activeButtonClass!: string;
+  holdInteractionTimeout!: number;
+  holdTimeout!: number;
+  isMouseHold!: boolean;
+  initialized!: boolean;
+  candidateBox!: CandidateBox | null;
+  keyboardRowsDOM!: KeyboardElement;
+  defaultName = "default";
+  activeInputElement: HTMLInputElement | HTMLTextAreaElement | null = null;

  /**
   * Creates an instance of SimpleKeyboard
@@ -52,9 +54,11 @@ class SimpleKeyboard {
  constructor(...params: KeyboardParams) {
    if (typeof window === "undefined") return;

-    const { keyboardDOMClass, keyboardDOM, options = {} } = this.handleParams(
-      params
-    );
+    const {
+      keyboardDOMClass,
+      keyboardDOM,
+      options = {},
+    } = this.handleParams(params);

    /**
     * Initializing Utilities
@@ -159,8 +163,9 @@ class SimpleKeyboard {
     * @property {object} default Default SimpleKeyboard internal input.
     * @property {object} myInputName Example input that can be set through `options.inputName:"myInputName"`.
     */
+    const { inputName = this.defaultName } = this.options;
    this.input = {};
-    this.input[this.options.inputName] = "";
+    this.input[inputName] = "";

    /**
     * @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
@@ -231,7 +236,7 @@ class SimpleKeyboard {
  ): {
    keyboardDOMClass: string;
    keyboardDOM: KeyboardElement;
-    options: Partial<KeyboardOptions>;
+    options: Partial<KeyboardOptions | undefined>;
  } => {
    let keyboardDOMClass;
    let keyboardDOM;
@@ -287,15 +292,15 @@ class SimpleKeyboard {
   * Getters
   */
  getOptions = (): KeyboardOptions => this.options;
-  getCaretPosition = (): number => this.caretPosition;
-  getCaretPositionEnd = (): number => this.caretPositionEnd;
+  getCaretPosition = (): number | null => this.caretPosition;
+  getCaretPositionEnd = (): number | null => this.caretPositionEnd;

  /**
   * Changes the internal caret position
   * @param {number} position The caret's start position
   * @param {number} positionEnd The caret's end position
   */
-  setCaretPosition(position: number, endPosition = position): void {
+  setCaretPosition(position: number | null, endPosition = position): void {
    this.caretPosition = position;
    this.caretPositionEnd = endPosition;
  }
@@ -315,8 +320,10 @@ class SimpleKeyboard {

    const layoutCandidates = Object.keys(layoutCandidatesObj).filter(
      (layoutCandidate: string) => {
+        const inputSubstr =
+          input.substring(0, this.getCaretPositionEnd() || 0) || input;
        const regexp = new RegExp(`${layoutCandidate}$`, "g");
-        const matches = [...input.matchAll(regexp)];
+        const matches = [...inputSubstr.matchAll(regexp)];
        return !!matches.length;
      }
    );
@@ -354,21 +361,37 @@ class SimpleKeyboard {
      this.candidateBox.show({
        candidateValue,
        targetElement,
-        onSelect: (selectedCandidate: string) => {
+        onSelect: (selectedCandidate: string, e: MouseEvent) => {
          const currentInput = this.getInput(this.options.inputName, true);
+          const initialCaretPosition = this.getCaretPositionEnd() || 0;
+          const inputSubstr =
+            currentInput.substring(0, initialCaretPosition || 0) ||
+            currentInput;
+
          const regexp = new RegExp(`${candidateKey}$`, "g");
-          const newInput = currentInput.replace(regexp, selectedCandidate);
+          const newInputSubstr = inputSubstr.replace(regexp, selectedCandidate);
+          const newInput = currentInput.replace(inputSubstr, newInputSubstr);
+
+          const caretPositionDiff = newInputSubstr.length - inputSubstr.length;
+          let newCaretPosition =
+            (initialCaretPosition || currentInput.length) + caretPositionDiff;
+
+          if (newCaretPosition < 0) newCaretPosition = 0;

          this.setInput(newInput, this.options.inputName, true);
+          this.setCaretPosition(newCaretPosition);

          if (typeof this.options.onChange === "function")
-            this.options.onChange(this.getInput(this.options.inputName, true));
+            this.options.onChange(
+              this.getInput(this.options.inputName, true),
+              e
+            );

          /**
           * Calling onChangeAll
           */
          if (typeof this.options.onChangeAll === "function")
-            this.options.onChangeAll(this.getAllInputs());
+            this.options.onChangeAll(this.getAllInputs(), e);
        },
      });
    }
@@ -379,8 +402,7 @@ class SimpleKeyboard {
   * @param  {string} button The button's layout name.
   */
  handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void {
-    const debug = this.options.debug;
-
+    const { inputName = this.defaultName, debug } = this.options;
    /**
     * Ignoring placeholder buttons
     */
@@ -389,28 +411,47 @@ class SimpleKeyboard {
    /**
     * Creating inputName if it doesn't exist
     */
-    if (!this.input[this.options.inputName])
-      this.input[this.options.inputName] = "";
+    if (!this.input[inputName]) this.input[inputName] = "";

    /**
     * Calculating new input
     */
    const updatedInput = this.utilities.getUpdatedInput(
      button,
-      this.input[this.options.inputName],
+      this.input[inputName],
      this.caretPosition,
      this.caretPositionEnd
    );

+    /**
+     * EDGE CASE: Check for whole input selection changes that will yield same updatedInput
+     */
+    if (this.utilities.isStandardButton(button) && this.activeInputElement) {
+      const isEntireInputSelection =
+        this.input[inputName] &&
+        this.input[inputName] === updatedInput &&
+        this.caretPosition === 0 &&
+        this.caretPositionEnd === updatedInput.length;
+
+      if (isEntireInputSelection) {
+        this.setInput("", this.options.inputName, true);
+        this.setCaretPosition(0);
+        this.activeInputElement.value = "";
+        this.activeInputElement.setSelectionRange(0, 0);
+        this.handleButtonClicked(button, e);
+        return;
+      }
+    }
+
    /**
     * Calling onKeyPress
     */
    if (typeof this.options.onKeyPress === "function")
-      this.options.onKeyPress(button);
+      this.options.onKeyPress(button, e);

    if (
      // If input will change as a result of this button press
-      this.input[this.options.inputName] !== updatedInput &&
+      this.input[inputName] !== updatedInput &&
      // This pertains to the "inputPattern" option:
      // If inputPattern isn't set
      (!this.options.inputPattern ||
@@ -432,7 +473,7 @@ class SimpleKeyboard {
       */
      const newInputValue = this.utilities.getUpdatedInput(
        button,
-        this.input[this.options.inputName],
+        this.input[inputName],
        this.caretPosition,
        this.caretPositionEnd,
        true
@@ -460,21 +501,20 @@ class SimpleKeyboard {
       * Calling onChange
       */
      if (typeof this.options.onChange === "function")
-        this.options.onChange(this.getInput(this.options.inputName, true));
+        this.options.onChange(this.getInput(this.options.inputName, true), e);

      /**
       * Calling onChangeAll
       */
      if (typeof this.options.onChangeAll === "function")
-        this.options.onChangeAll(this.getAllInputs());
+        this.options.onChangeAll(this.getAllInputs(), e);

      /**
       * Check if this new input has candidates (suggested words)
       */
      if (e?.target && this.options.enableLayoutCandidates) {
-        const { candidateKey, candidateValue } = this.getInputCandidates(
-          updatedInput
-        );
+        const { candidateKey, candidateValue } =
+          this.getInputCandidates(updatedInput);

        if (candidateKey && candidateValue) {
          this.showCandidatesBox(
@@ -483,7 +523,7 @@ class SimpleKeyboard {
            this.keyboardDOM
          );
        } else {
-          this.candidateBox.destroy();
+          this.candidateBox?.destroy();
        }
      }
    }
@@ -639,8 +679,9 @@ class SimpleKeyboard {
   * Clear the keyboard’s input.
   * @param {string} [inputName] optional - the internal input to select
   */
-  clearInput(inputName: string): void {
-    inputName = inputName || this.options.inputName;
+  clearInput(
+    inputName: string = this.options.inputName || this.defaultName
+  ): void {
    this.input[inputName] = "";

    /**
@@ -658,7 +699,10 @@ class SimpleKeyboard {
   * Get the keyboard’s input (You can also get it from the onChange prop).
   * @param  {string} [inputName] optional - the internal input to select
   */
-  getInput(inputName = this.options.inputName, skipSync = false): string {
+  getInput(
+    inputName: string = this.options.inputName || this.defaultName,
+    skipSync = false
+  ): string {
    /**
     * Enforce syncInstanceInputs, if set
     */
@@ -697,7 +741,7 @@ class SimpleKeyboard {
   */
  setInput(
    input: string,
-    inputName = this.options.inputName,
+    inputName: string = this.options.inputName || this.defaultName,
    skipSync?: boolean
  ): void {
    this.input[inputName] = input;
@@ -758,19 +802,6 @@ class SimpleKeyboard {
   * @param  {object} options The options to set
   */
  onSetOptions(changedOptions: string[] = []): void {
-    /**
-     * Changed: inputName
-     */
-    if (changedOptions.includes("inputName")) {
-      /**
-       * inputName changed. This requires a caretPosition reset
-       */
-      if (this.options.debug) {
-        console.log("inputName changed. caretPosition reset.");
-      }
-      this.setCaretPosition(null);
-    }
-
    /**
     * Changed: layoutName
     */
@@ -851,7 +882,7 @@ class SimpleKeyboard {
         * If class is already defined, we add button to class definition
         */
        this.options.buttonTheme.map((buttonTheme) => {
-          if (buttonTheme.class.split(" ").includes(classNameItem)) {
+          if (buttonTheme?.class.split(" ").includes(classNameItem)) {
            classNameFound = true;

            const buttonThemeArray = buttonTheme.buttons.split(" ");
@@ -904,26 +935,28 @@ class SimpleKeyboard {
    ) {
      const buttonArray = buttons.split(" ");
      buttonArray.forEach((button) => {
-        this.options.buttonTheme.map((buttonTheme, index) => {
+        this.options?.buttonTheme?.map((buttonTheme, index) => {
          /**
           * If className is set, we affect the buttons only for that class
           * Otherwise, we afect all classes
           */
          if (
-            (className && className.includes(buttonTheme.class)) ||
+            (buttonTheme &&
+              className &&
+              className.includes(buttonTheme.class)) ||
            !className
          ) {
-            const filteredButtonArray = buttonTheme.buttons
+            const filteredButtonArray = buttonTheme?.buttons
              .split(" ")
              .filter((item) => item !== button);

            /**
             * If buttons left, return them, otherwise, remove button Theme
             */
-            if (filteredButtonArray.length) {
+            if (buttonTheme && filteredButtonArray?.length) {
              buttonTheme.buttons = filteredButtonArray.join(" ");
            } else {
-              this.options.buttonTheme.splice(index, 1);
+              this.options.buttonTheme?.splice(index, 1);
              buttonTheme = null;
            }
          }
@@ -940,7 +973,9 @@ class SimpleKeyboard {
   * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
   * @param  {string} button The button layout name to select
   */
-  getButtonElement(button: string): KeyboardElement | KeyboardElement[] {
+  getButtonElement(
+    button: string
+  ): KeyboardElement | KeyboardElement[] | undefined {
    let output;

    const buttonArr = this.buttonElements[button];
@@ -969,7 +1004,8 @@ class SimpleKeyboard {
    if (inputPatternRaw instanceof RegExp) {
      inputPattern = inputPatternRaw;
    } else {
-      inputPattern = inputPatternRaw[this.options.inputName];
+      inputPattern =
+        inputPatternRaw[this.options.inputName || this.defaultName];
    }

    if (inputPattern && inputVal) {
@@ -1012,6 +1048,7 @@ class SimpleKeyboard {
      document.addEventListener("mouseup", this.handleMouseUp);
      document.addEventListener("touchend", this.handleTouchEnd);
      document.addEventListener("select", this.handleSelect);
+      document.addEventListener("selectionchange", this.handleSelectionChange);
    }
  }

@@ -1058,6 +1095,14 @@ class SimpleKeyboard {
    this.caretEventHandler(event);
  }

+  /**
+   * Event Handler: SelectionChange
+   */
+  /* istanbul ignore next */
+  handleSelectionChange(event: KeyboardHandlerEvent): void {
+    this.caretEventHandler(event);
+  }
+
  /**
   * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
   */
@@ -1077,10 +1122,11 @@ class SimpleKeyboard {
      }

      if (
-        (targetTagName === "textarea" || targetTagName === "input") &&
-        ["text", "search", "url", "tel", "password"].includes(
-          event.target.type
-        ) &&
+        (targetTagName === "textarea" ||
+          (targetTagName === "input" &&
+            ["text", "search", "url", "tel", "password"].includes(
+              event.target.type
+            ))) &&
        !instance.options.disableCaretPositioning
      ) {
        /**
@@ -1092,6 +1138,11 @@ class SimpleKeyboard {
          event.target.selectionEnd
        );

+        /**
+         * Tracking current input in order to handle caret positioning edge cases
+         */
+        this.activeInputElement = event.target;
+
        if (instance.options.debug) {
          console.log(
            "Caret at: ",
@@ -1101,11 +1152,26 @@ class SimpleKeyboard {
            `(${instance.keyboardDOMClass})`
          );
        }
-      } else if (instance.options.disableCaretPositioning || !isKeyboard) {
+      } else if (
+        (instance.options.disableCaretPositioning || !isKeyboard) &&
+        event?.type !== "selectionchange"
+      ) {
        /**
         * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
         */
        instance.setCaretPosition(null);
+
+        /**
+         * Resetting activeInputElement
+         */
+        this.activeInputElement = null;
+
+        if (instance.options.debug) {
+          console.log(
+            `Caret position reset due to "${event?.type}" event`,
+            event
+          );
+        }
      }
    });
  }
@@ -1138,6 +1204,7 @@ class SimpleKeyboard {
    document.removeEventListener("mouseup", this.handleMouseUp);
    document.removeEventListener("touchend", this.handleTouchEnd);
    document.removeEventListener("select", this.handleSelect);
+    document.removeEventListener("selectionchange", this.handleSelectionChange);
    document.onpointerup = null;
    document.ontouchend = null;
    document.ontouchcancel = null;
@@ -1146,26 +1213,25 @@ class SimpleKeyboard {
    /**
     * Remove buttons
     */
-    let deleteButton = (buttonElement: KeyboardElement) => {
-      buttonElement.onpointerdown = null;
-      buttonElement.onpointerup = null;
-      buttonElement.onpointercancel = null;
-      buttonElement.ontouchstart = null;
-      buttonElement.ontouchend = null;
-      buttonElement.ontouchcancel = null;
-      buttonElement.onclick = null;
-      buttonElement.onmousedown = null;
-      buttonElement.onmouseup = null;
+    const deleteButton = (buttonElement: KeyboardElement | null) => {
+      if (buttonElement) {
+        buttonElement.onpointerdown = null;
+        buttonElement.onpointerup = null;
+        buttonElement.onpointercancel = null;
+        buttonElement.ontouchstart = null;
+        buttonElement.ontouchend = null;
+        buttonElement.ontouchcancel = null;
+        buttonElement.onclick = null;
+        buttonElement.onmousedown = null;
+        buttonElement.onmouseup = null;

-      buttonElement.remove();
-      buttonElement = null;
+        buttonElement.remove();
+        buttonElement = null;
+      }
    };

    this.recurseButtons(deleteButton);

-    this.recurseButtons = null;
-    deleteButton = null;
-
    /**
     * Remove wrapper events
     */
@@ -1186,6 +1252,11 @@ class SimpleKeyboard {
      this.candidateBox = null;
    }

+    /**
+     * Clearing activeInputElement
+     */
+    this.activeInputElement = null;
+
    /**
     * Clearing keyboardDOM
     */
@@ -1213,6 +1284,7 @@ class SimpleKeyboard {
    if (Array.isArray(buttonTheme)) {
      buttonTheme.forEach((themeObj) => {
        if (
+          themeObj &&
          themeObj.class &&
          typeof themeObj.class === "string" &&
          themeObj.buttons &&
@@ -1336,7 +1408,7 @@ class SimpleKeyboard {
    }

    if (typeof this.options.beforeFirstRender === "function")
-      this.options.beforeFirstRender();
+      this.options.beforeFirstRender(this);

    /**
     * Notify about PointerEvents usage
@@ -1369,7 +1441,7 @@ class SimpleKeyboard {
   */
  beforeRender() {
    if (typeof this.options.beforeRender === "function")
-      this.options.beforeRender();
+      this.options.beforeRender(this);
  }

  /**
@@ -1574,211 +1646,219 @@ class SimpleKeyboard {
    /**
     * Iterating through each row
     */
-    layout[this.options.layoutName].forEach((row, rIndex) => {
-      let rowArray = row.split(" ");
-
-      /**
-       * Enforce excludeFromLayout
-       */
-      if (this.options.excludeFromLayout[this.options.layoutName]) {
-        rowArray = rowArray.filter(
-          (buttonName) =>
-            !this.options.excludeFromLayout[this.options.layoutName].includes(
-              buttonName
-            )
-        );
-      }
-
-      /**
-       * Creating empty row
-       */
-      let rowDOM = document.createElement("div");
-      rowDOM.className += "hg-row";
-
-      /**
-       * Tracking container indicators in rows
-       */
-      const containerStartIndexes: number[] = [];
-      const containerEndIndexes: number[] = [];
-
-      /**
-       * Iterating through each button in row
-       */
-      rowArray.forEach((button, bIndex) => {
-        /**
-         * Check if button has a container indicator
-         */
-        const buttonHasContainerStart =
-          !disableRowButtonContainers &&
-          typeof button === "string" &&
-          button.length > 1 &&
-          button.indexOf("[") === 0;
-
-        const buttonHasContainerEnd =
-          !disableRowButtonContainers &&
-          typeof button === "string" &&
-          button.length > 1 &&
-          button.indexOf("]") === button.length - 1;
+    layout[this.options.layoutName || this.defaultName].forEach(
+      (row, rIndex) => {
+        let rowArray = row.split(" ");

        /**
-         * Save container start index, if applicable
+         * Enforce excludeFromLayout
         */
-        if (buttonHasContainerStart) {
-          containerStartIndexes.push(bIndex);
-
-          /**
-           * Removing indicator
-           */
-          button = button.replace(/\[/g, "");
-        }
-
-        if (buttonHasContainerEnd) {
-          containerEndIndexes.push(bIndex);
-
-          /**
-           * Removing indicator
-           */
-          button = button.replace(/\]/g, "");
-        }
-
-        /**
-         * Processing button options
-         */
-        const fctBtnClass = this.utilities.getButtonClass(button);
-        const buttonDisplayName = this.utilities.getButtonDisplayName(
-          button,
-          this.options.display,
-          this.options.mergeDisplay
-        );
-
-        /**
-         * Creating button
-         */
-        const buttonType = this.options.useButtonTag ? "button" : "div";
-        const buttonDOM = document.createElement(buttonType);
-        buttonDOM.className += `hg-button ${fctBtnClass}`;
-
-        /**
-         * Adding buttonTheme
-         */
-        buttonDOM.classList.add(...this.getButtonThemeClasses(button));
-
-        /**
-         * Adding buttonAttributes
-         */
-        this.setDOMButtonAttributes(
-          button,
-          (attribute: string, value: string) => {
-            buttonDOM.setAttribute(attribute, value);
-          }
-        );
-
-        this.activeButtonClass = "hg-activeButton";
-
-        /**
-         * Handle button click event
-         */
-        /* istanbul ignore next */
        if (
-          this.utilities.pointerEventsSupported() &&
-          !useTouchEvents &&
-          !useMouseEvents
+          this.options.excludeFromLayout &&
+          this.options.excludeFromLayout[
+            this.options.layoutName || this.defaultName
+          ]
        ) {
+          rowArray = rowArray.filter(
+            (buttonName) =>
+              this.options.excludeFromLayout &&
+              !this.options.excludeFromLayout[
+                this.options.layoutName || this.defaultName
+              ].includes(buttonName)
+          );
+        }
+
+        /**
+         * Creating empty row
+         */
+        let rowDOM = document.createElement("div");
+        rowDOM.className += "hg-row";
+
+        /**
+         * Tracking container indicators in rows
+         */
+        const containerStartIndexes: number[] = [];
+        const containerEndIndexes: number[] = [];
+
+        /**
+         * Iterating through each button in row
+         */
+        rowArray.forEach((button, bIndex) => {
          /**
-           * Handle PointerEvents
+           * Check if button has a container indicator
           */
-          buttonDOM.onpointerdown = (e: KeyboardHandlerEvent) => {
-            this.handleButtonClicked(button, e);
-            this.handleButtonMouseDown(button, e);
-          };
-          buttonDOM.onpointerup = (e: KeyboardHandlerEvent) => {
-            this.handleButtonMouseUp(button, e);
-          };
-          buttonDOM.onpointercancel = (e: KeyboardHandlerEvent) => {
-            this.handleButtonMouseUp(button, e);
-          };
-        } else {
+          const buttonHasContainerStart =
+            !disableRowButtonContainers &&
+            typeof button === "string" &&
+            button.length > 1 &&
+            button.indexOf("[") === 0;
+
+          const buttonHasContainerEnd =
+            !disableRowButtonContainers &&
+            typeof button === "string" &&
+            button.length > 1 &&
+            button.indexOf("]") === button.length - 1;
+
          /**
-           * Fallback for browsers not supporting PointerEvents
+           * Save container start index, if applicable
           */
-          if (useTouchEvents) {
+          if (buttonHasContainerStart) {
+            containerStartIndexes.push(bIndex);
+
            /**
-             * Handle touch events
+             * Removing indicator
             */
-            buttonDOM.ontouchstart = (e: KeyboardHandlerEvent) => {
+            button = button.replace(/\[/g, "");
+          }
+
+          if (buttonHasContainerEnd) {
+            containerEndIndexes.push(bIndex);
+
+            /**
+             * Removing indicator
+             */
+            button = button.replace(/\]/g, "");
+          }
+
+          /**
+           * Processing button options
+           */
+          const fctBtnClass = this.utilities.getButtonClass(button);
+          const buttonDisplayName = this.utilities.getButtonDisplayName(
+            button,
+            this.options.display,
+            this.options.mergeDisplay
+          );
+
+          /**
+           * Creating button
+           */
+          const buttonType = this.options.useButtonTag ? "button" : "div";
+          const buttonDOM = document.createElement(buttonType);
+          buttonDOM.className += `hg-button ${fctBtnClass}`;
+
+          /**
+           * Adding buttonTheme
+           */
+          buttonDOM.classList.add(...this.getButtonThemeClasses(button));
+
+          /**
+           * Adding buttonAttributes
+           */
+          this.setDOMButtonAttributes(
+            button,
+            (attribute: string, value: string) => {
+              buttonDOM.setAttribute(attribute, value);
+            }
+          );
+
+          this.activeButtonClass = "hg-activeButton";
+
+          /**
+           * Handle button click event
+           */
+          /* istanbul ignore next */
+          if (
+            this.utilities.pointerEventsSupported() &&
+            !useTouchEvents &&
+            !useMouseEvents
+          ) {
+            /**
+             * Handle PointerEvents
+             */
+            buttonDOM.onpointerdown = (e: KeyboardHandlerEvent) => {
              this.handleButtonClicked(button, e);
              this.handleButtonMouseDown(button, e);
            };
-            buttonDOM.ontouchend = (e: KeyboardHandlerEvent) => {
+            buttonDOM.onpointerup = (e: KeyboardHandlerEvent) => {
              this.handleButtonMouseUp(button, e);
            };
-            buttonDOM.ontouchcancel = (e: KeyboardHandlerEvent) => {
+            buttonDOM.onpointercancel = (e: KeyboardHandlerEvent) => {
              this.handleButtonMouseUp(button, e);
            };
          } else {
            /**
-             * Handle mouse events
+             * Fallback for browsers not supporting PointerEvents
             */
-            buttonDOM.onclick = (e: KeyboardHandlerEvent) => {
-              this.isMouseHold = false;
-              this.handleButtonClicked(button, e);
-            };
-            buttonDOM.onmousedown = (e: KeyboardHandlerEvent) => {
-              this.handleButtonMouseDown(button, e);
-            };
-            buttonDOM.onmouseup = (e: KeyboardHandlerEvent) => {
-              this.handleButtonMouseUp(button, e);
-            };
+            if (useTouchEvents) {
+              /**
+               * Handle touch events
+               */
+              buttonDOM.ontouchstart = (e: KeyboardHandlerEvent) => {
+                this.handleButtonClicked(button, e);
+                this.handleButtonMouseDown(button, e);
+              };
+              buttonDOM.ontouchend = (e: KeyboardHandlerEvent) => {
+                this.handleButtonMouseUp(button, e);
+              };
+              buttonDOM.ontouchcancel = (e: KeyboardHandlerEvent) => {
+                this.handleButtonMouseUp(button, e);
+              };
+            } else {
+              /**
+               * Handle mouse events
+               */
+              buttonDOM.onclick = (e: KeyboardHandlerEvent) => {
+                this.isMouseHold = false;
+                this.handleButtonClicked(button, e);
+              };
+              buttonDOM.onmousedown = (e: KeyboardHandlerEvent) => {
+                this.handleButtonMouseDown(button, e);
+              };
+              buttonDOM.onmouseup = (e: KeyboardHandlerEvent) => {
+                this.handleButtonMouseUp(button, e);
+              };
+            }
          }
-        }
+
+          /**
+           * Adding identifier
+           */
+          buttonDOM.setAttribute("data-skBtn", button);
+
+          /**
+           * Adding unique id
+           * Since there's no limit on spawning same buttons, the unique id ensures you can style every button
+           */
+          const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
+          buttonDOM.setAttribute("data-skBtnUID", buttonUID);
+
+          /**
+           * Adding button label to button
+           */
+          const buttonSpanDOM = document.createElement("span");
+          buttonSpanDOM.innerHTML = buttonDisplayName;
+          buttonDOM.appendChild(buttonSpanDOM);
+
+          /**
+           * Adding to buttonElements
+           */
+          if (!this.buttonElements[button]) this.buttonElements[button] = [];
+
+          this.buttonElements[button].push(buttonDOM);
+
+          /**
+           * Appending button to row
+           */
+          rowDOM.appendChild(buttonDOM);
+        });

        /**
-         * Adding identifier
+         * Parse containers in row
         */
-        buttonDOM.setAttribute("data-skBtn", button);
+        rowDOM = this.parseRowDOMContainers(
+          rowDOM,
+          rIndex,
+          containerStartIndexes,
+          containerEndIndexes
+        );

        /**
-         * Adding unique id
-         * Since there's no limit on spawning same buttons, the unique id ensures you can style every button
+         * Appending row to hg-rows
         */
-        const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
-        buttonDOM.setAttribute("data-skBtnUID", buttonUID);
-
-        /**
-         * Adding button label to button
-         */
-        const buttonSpanDOM = document.createElement("span");
-        buttonSpanDOM.innerHTML = buttonDisplayName;
-        buttonDOM.appendChild(buttonSpanDOM);
-
-        /**
-         * Adding to buttonElements
-         */
-        if (!this.buttonElements[button]) this.buttonElements[button] = [];
-
-        this.buttonElements[button].push(buttonDOM);
-
-        /**
-         * Appending button to row
-         */
-        rowDOM.appendChild(buttonDOM);
-      });
-
-      /**
-       * Parse containers in row
-       */
-      rowDOM = this.parseRowDOMContainers(
-        rowDOM,
-        rIndex,
-        containerStartIndexes,
-        containerEndIndexes
-      );
-
-      /**
-       * Appending row to hg-rows
-       */
-      this.keyboardRowsDOM.appendChild(rowDOM);
-    });
+        this.keyboardRowsDOM.appendChild(rowDOM);
+      }
+    );

    /**
     * Appending row to keyboard
@@ -1806,7 +1886,7 @@ class SimpleKeyboard {
        !useMouseEvents
      ) {
        document.onpointerup = (e: KeyboardHandlerEvent) =>
-          this.handleButtonMouseUp(null, e);
+          this.handleButtonMouseUp(undefined, e);
        this.keyboardDOM.onpointerdown = (e: KeyboardHandlerEvent) =>
          this.handleKeyboardContainerMouseDown(e);
      } else if (useTouchEvents) {
@@ -1814,9 +1894,9 @@ class SimpleKeyboard {
         * Handling ontouchend, ontouchcancel
         */
        document.ontouchend = (e: KeyboardHandlerEvent) =>
-          this.handleButtonMouseUp(null, e);
+          this.handleButtonMouseUp(undefined, e);
        document.ontouchcancel = (e: KeyboardHandlerEvent) =>
-          this.handleButtonMouseUp(null, e);
+          this.handleButtonMouseUp(undefined, e);

        this.keyboardDOM.ontouchstart = (e: KeyboardHandlerEvent) =>
          this.handleKeyboardContainerMouseDown(e);
@@ -1825,7 +1905,7 @@ class SimpleKeyboard {
         * Handling mouseup
         */
        document.onmouseup = (e: KeyboardHandlerEvent) =>
-          this.handleButtonMouseUp(null, e);
+          this.handleButtonMouseUp(undefined, e);
        this.keyboardDOM.onmousedown = (e: KeyboardHandlerEvent) =>
          this.handleKeyboardContainerMouseDown(e);
      }
@@ -216,7 +216,7 @@ it('CandidateBox select candidate will work', () => {
  keyboard.getButtonElement("a").click();
  keyboard.candidateBox.candidateBoxElement.querySelector("li").click();

-  expect(onSelect).toBeCalledWith("1");
+  expect(onSelect).toBeCalledWith("1", expect.anything());
  keyboard.destroy();
 });

@@ -353,6 +353,7 @@ it('CandidateBox selection should trigger onChange', () => {
    });
  
    const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
+    
    jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
      candidateBoxOnItemSelected = params.onItemSelected;
      params.onItemSelected = onSelect;
@@ -362,10 +363,10 @@ it('CandidateBox selection should trigger onChange', () => {
    keyboard.getButtonElement("a").click();
    keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
  
-    expect(keyboard.options.onChange).toBeCalledWith("a");
-    expect(keyboard.options.onChangeAll).toBeCalledWith({"default": "a"});
+    expect(keyboard.options.onChange.mock.calls[0][0]).toBe("a");
+    expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});

-    expect(keyboard.options.onChange).toBeCalledWith("1");
-    expect(keyboard.options.onChangeAll).toBeCalledWith({"default": "1"});
+    expect(keyboard.options.onChange.mock.calls[1][0]).toBe("1");
+    expect(keyboard.options.onChangeAll.mock.calls[1][0]).toMatchObject({"default": "1"});
    keyboard.destroy();
  });
@@ -1138,27 +1138,6 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
  expect(containers.length).toBe(0);
 });

-it('Keyboard inputName change will trigget caretPosition reset', () => {
-    const keyboard = new Keyboard();
-
-  keyboard.setCaretPosition(0);
-
-  keyboard.getButtonElement("q").onpointerdown();
-  keyboard.getButtonElement("1").onpointerdown();
-
-  expect(keyboard.getCaretPosition()).toBe(2);
-
-  keyboard.setOptions({
-    inputName: "myInput"
-  });
-
-  keyboard.getButtonElement("q").onpointerdown();
-  keyboard.getButtonElement("1").onpointerdown();
-  keyboard.getButtonElement("b").onpointerdown();
-
-  expect(keyboard.getCaretPosition()).toBe(null);
-});
-
 it('Keyboard destroy will work', () => {
    const keyboard = new Keyboard();
  keyboard.destroy();
@@ -1351,4 +1330,25 @@ it('Keyboard excludeFromLayout will work', () => {
 it('Keyboard onSetOptions can be called without changedOptions param', () => {
  const keyboard = new Keyboard();
  expect(keyboard.onSetOptions()).toBeUndefined();
+});
+
+it('Keyboard will handle selected input with unchanged updatedInput edge case', () => {
+  const inputElem = document.createElement("input");
+  const onChange = jest.fn();
+  const keyboard = new Keyboard({ onChange });
+  
+  const initialValue = "3";
+  inputElem.value = initialValue;
+  inputElem.select();
+  keyboard.setInput(initialValue);
+  keyboard.activeInputElement = inputElem;
+  keyboard.setCaretPosition(0, 1);
+
+  keyboard.getButtonElement("3").onpointerdown();
+  keyboard.getButtonElement("3").onpointerdown();
+
+  expect(onChange).toBeCalledTimes(2);
+  expect(keyboard.getInput()).toBe("33");
+  expect(keyboard.getCaretPosition()).toBe(2);
+  expect(keyboard.getCaretPositionEnd()).toBe(2);
 });
@@ -6,10 +6,10 @@ export interface KeyboardLayoutObject {
    [key: string]: string[];
 }

-export interface KeyboardButtonTheme {
+export type KeyboardButtonTheme = {
    class: string;
    buttons: string;
-}
+} | null;

 export interface KeyboardButtonAttributes {
    attribute: string;
@@ -31,7 +31,7 @@ export type CandidateBoxShowParams = {
    candidateValue: string,
    targetElement: KeyboardElement,
    // eslint-disable-next-line no-unused-vars
-    onSelect: (selectedCandidate: string) => void
+    onSelect: (selectedCandidate: string, e: MouseEvent) => void
 }

 export type CandidateBoxRenderParams = {
@@ -40,11 +40,11 @@ export type CandidateBoxRenderParams = {
    pageIndex: number;
    nbPages: number;
    // eslint-disable-next-line no-unused-vars
-    onItemSelected: (selectedCandidate: string) => void
+    onItemSelected: (selectedCandidate: string, e: MouseEvent) => void
 }

 export type KeyboardElement = HTMLDivElement | HTMLButtonElement;
-export type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & { target: HTMLDivElement & HTMLInputElement };
+export type KeyboardHandlerEvent = any;

 export interface KeyboardButtonElements {
    [key: string]: KeyboardElement[]
@@ -52,8 +52,13 @@ export interface KeyboardButtonElements {

 export interface UtilitiesParams {
    getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
+    dispatch: any;
+}
+
+export interface PhysicalKeyboardParams {
+    getOptions: () => KeyboardOptions;
    dispatch: any;
 }

@@ -131,10 +136,17 @@ export interface KeyboardOptions {
    physicalKeyboardHighlight?: boolean;

    /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
     */
    physicalKeyboardHighlightPress?: boolean;

+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
+
    /**
     * Define the text color that the physical keyboard highlighted key should have.
     */
@@ -235,6 +247,16 @@ export interface KeyboardOptions {
     */
     onInit?: (instance?: SimpleKeyboard) => void;

+    /**
+     * Retrieves the current input
+     */
+    onChange?: (input: string, e?: MouseEvent) => any;
+
+    /**
+     * Retrieves all inputs
+     */
+    onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any;
+
    /**
     * Module options can have any format
     */
@@ -1,4 +1,4 @@
-import { KeyboardOptions, UtilitiesParams } from "../interfaces";
+import { KeyboardOptions, PhysicalKeyboardParams } from "../interfaces";
 import Utilities from "../services/Utilities";

 /**
@@ -11,7 +11,7 @@ class PhysicalKeyboard {
  /**
   * Creates an instance of the PhysicalKeyboard service
   */
-  constructor({ dispatch, getOptions }: Partial<UtilitiesParams>) {
+  constructor({ dispatch, getOptions }: PhysicalKeyboardParams) {
    /**
     * @type {object} A simple-keyboard instance
     */
@@ -29,9 +29,22 @@ class PhysicalKeyboard {
    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);

    this.dispatch((instance: any) => {
-      const buttonDOM =
-        instance.getButtonElement(buttonPressed) ||
-        instance.getButtonElement(`{${buttonPressed}}`);
+      const standardButtonPressed = instance.getButtonElement(buttonPressed);
+      const functionButtonPressed = instance.getButtonElement(
+        `{${buttonPressed}}`
+      );
+      let buttonDOM;
+      let buttonName;
+
+      if (standardButtonPressed) {
+        buttonDOM = standardButtonPressed;
+        buttonName = buttonPressed;
+      } else if (functionButtonPressed) {
+        buttonDOM = functionButtonPressed;
+        buttonName = `{${buttonPressed}}`;
+      } else {
+        return;
+      }

      if (buttonDOM) {
        buttonDOM.style.backgroundColor =
@@ -40,22 +53,17 @@ class PhysicalKeyboard {
          options.physicalKeyboardHighlightTextColor || "black";

        if (options.physicalKeyboardHighlightPress) {
-          /**
-           * Trigger pointerdown
-           */
-          (
-            buttonDOM.onpointerdown ||
-            buttonDOM.onmousedown ||
-            buttonDOM.ontouchstart ||
-            Utilities.noop
-          )();
+          if (options.physicalKeyboardHighlightPressUseClick) {
+            buttonDOM.click();
+          } else {
+            instance.handleButtonClicked(buttonName, event);
+          }
        }
      }
    });
  }

  handleHighlightKeyUp(event: KeyboardEvent) {
-    const options = this.getOptions();
    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);

    this.dispatch((instance: any) => {
@@ -65,18 +73,6 @@ class PhysicalKeyboard {

      if (buttonDOM && buttonDOM.removeAttribute) {
        buttonDOM.removeAttribute("style");
-
-        if (options.physicalKeyboardHighlightPress) {
-          /**
-           * Trigger pointerup
-           */
-          (
-            buttonDOM.onpointerup ||
-            buttonDOM.onmouseup ||
-            buttonDOM.ontouchend ||
-            Utilities.noop
-          )();
-        }
      }
    });
  }
@@ -86,35 +82,129 @@ class PhysicalKeyboard {
   * @param  {object} event The KeyboardEvent
   */
  getSimpleKeyboardLayoutKey(event: KeyboardEvent) {
-    let output;
+    let output = "";
+    const keyId = event.code || event.key || this.keyCodeToKey(event?.keyCode);

    if (
-      event.code.includes("Numpad") ||
-      event.code.includes("Shift") ||
-      event.code.includes("Space") ||
-      event.code.includes("Backspace") ||
-      event.code.includes("Control") ||
-      event.code.includes("Alt") ||
-      event.code.includes("Meta")
+      keyId?.includes("Numpad") ||
+      keyId?.includes("Shift") ||
+      keyId?.includes("Space") ||
+      keyId?.includes("Backspace") ||
+      keyId?.includes("Control") ||
+      keyId?.includes("Alt") ||
+      keyId?.includes("Meta")
    ) {
-      output = event.code;
+      output = event.code || "";
    } else {
-      output = event.key;
+      output = event.key || this.keyCodeToKey(event?.keyCode) || "";
    }

-    /**
-     * Casting key to lowercase
-     */
-    if (
-      (output && output !== output.toUpperCase()) ||
-      (event.code[0] === "F" &&
-        Number.isInteger(Number(event.code[1])) &&
-        event.code.length <= 3)
-    ) {
-      output = output ? output.toLowerCase() : output;
-    }
+    return output.length > 1 ? output?.toLowerCase() : output;
+  }

-    return output;
+  /**
+   * Retrieve key from keyCode
+   */
+  keyCodeToKey(keyCode: number) {
+    return {
+      8: "Backspace",
+      9: "Tab",
+      13: "Enter",
+      16: "Shift",
+      17: "Ctrl",
+      18: "Alt",
+      19: "Pause",
+      20: "CapsLock",
+      27: "Esc",
+      32: "Space",
+      33: "PageUp",
+      34: "PageDown",
+      35: "End",
+      36: "Home",
+      37: "ArrowLeft",
+      38: "ArrowUp",
+      39: "ArrowRight",
+      40: "ArrowDown",
+      45: "Insert",
+      46: "Delete",
+      48: "0",
+      49: "1",
+      50: "2",
+      51: "3",
+      52: "4",
+      53: "5",
+      54: "6",
+      55: "7",
+      56: "8",
+      57: "9",
+      65: "A",
+      66: "B",
+      67: "C",
+      68: "D",
+      69: "E",
+      70: "F",
+      71: "G",
+      72: "H",
+      73: "I",
+      74: "J",
+      75: "K",
+      76: "L",
+      77: "M",
+      78: "N",
+      79: "O",
+      80: "P",
+      81: "Q",
+      82: "R",
+      83: "S",
+      84: "T",
+      85: "U",
+      86: "V",
+      87: "W",
+      88: "X",
+      89: "Y",
+      90: "Z",
+      91: "Meta",
+      96: "Numpad0",
+      97: "Numpad1",
+      98: "Numpad2",
+      99: "Numpad3",
+      100: "Numpad4",
+      101: "Numpad5",
+      102: "Numpad6",
+      103: "Numpad7",
+      104: "Numpad8",
+      105: "Numpad9",
+      106: "NumpadMultiply",
+      107: "NumpadAdd",
+      109: "NumpadSubtract",
+      110: "NumpadDecimal",
+      111: "NumpadDivide",
+      112: "F1",
+      113: "F2",
+      114: "F3",
+      115: "F4",
+      116: "F5",
+      117: "F6",
+      118: "F7",
+      119: "F8",
+      120: "F9",
+      121: "F10",
+      122: "F11",
+      123: "F12",
+      144: "NumLock",
+      145: "ScrollLock",
+      186: ";",
+      187: "=",
+      188: ",",
+      189: "-",
+      190: ".",
+      191: "/",
+      192: "`",
+      219: "[",
+      220: "\\",
+      221: "]",
+      222: "'",
+    }[keyCode];
  }
 }

@@ -6,10 +6,10 @@ import { KeyboardOptions, UtilitiesParams } from "../interfaces";
 */
 class Utilities {
  getOptions: () => KeyboardOptions;
-  getCaretPosition: () => number;
-  getCaretPositionEnd: () => number;
+  getCaretPosition: () => number | null;
+  getCaretPositionEnd: () => number | null;
  dispatch: any;
-  maxLengthReached: boolean;
+  maxLengthReached!: boolean;

  /**
   * Creates an instance of the Utility service
@@ -106,6 +106,7 @@ class Utilities {
      "{home}": "home",
      "{pageup}": "up",
      "{delete}": "del",
+      "{forwarddelete}": "del",
      "{end}": "end",
      "{pagedown}": "down",
      "{numpadmultiply}": "*",
@@ -177,6 +178,11 @@ class Utilities {
      output.length > 0
    ) {
      output = this.removeAt(output, ...commonParams);
+    } else if (
+      (button === "{delete}" || button === "{forwarddelete}") &&
+      output.length > 0
+    ) {
+      output = this.removeForwardsAt(output, ...commonParams);
    } else if (button === "{space}")
      output = this.addStringAt(output, " ", ...commonParams);
    else if (
@@ -243,10 +249,12 @@ class Utilities {
    const options = this.getOptions();
    let caretPosition = this.getCaretPosition();

-    if (minus) {
-      if (caretPosition > 0) caretPosition = caretPosition - length;
-    } else {
-      caretPosition = caretPosition + length;
+    if (caretPosition != null) {
+      if (minus) {
+        if (caretPosition > 0) caretPosition = caretPosition - length;
+      } else {
+        caretPosition = caretPosition + length;
+      }
    }

    if (options.debug) {
@@ -292,7 +300,13 @@ class Utilities {
  }

  /**
-   * Removes an amount of characters at a given position
+   * Check whether the button is a standard button
+   */
+  isStandardButton = (button: string) =>
+    button && !(button[0] === "{" && button[button.length - 1] === "}");
+
+  /**
+   * Removes an amount of characters before a given position
   *
   * @param  {string} source The source input
   * @param  {number} position The (cursor) position from where the characters should be removed
@@ -353,6 +367,52 @@ class Utilities {

    return output;
  }
+
+  /**
+   * Removes an amount of characters after a given position
+   *
+   * @param  {string} source The source input
+   * @param  {number} position The (cursor) position from where the characters should be removed
+   */
+  removeForwardsAt(
+    source: string,
+    position: number = source.length,
+    positionEnd: number = source.length,
+    moveCaret = false
+  ) {
+    if (!source?.length || position === null) {
+      return source;
+    }
+
+    let output;
+
+    if (position === positionEnd) {
+      const emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
+
+      /**
+       * Emojis are made out of two characters, so we must take a custom approach to trim them.
+       * For more info: https://mathiasbynens.be/notes/javascript-unicode
+       */
+      const nextTwoChars = source.substring(position, position + 2);
+      const emojiMatched = nextTwoChars.match(emojiMatchedReg);
+
+      if (emojiMatched) {
+        output = source.substr(0, position) + source.substr(position + 2);
+      } else {
+        output = source.substr(0, position) + source.substr(position + 1);
+      }
+    } else {
+      output = source.slice(0, position) + source.slice(positionEnd);
+      if (moveCaret) {
+        this.dispatch((instance: any) => {
+          instance.setCaretPosition(position);
+        });
+      }
+    }
+
+    return output;
+  }
+
  /**
   * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
   *
@@ -362,7 +422,7 @@ class Utilities {
  handleMaxLength(inputObj: KeyboardInput, updatedInput: string) {
    const options = this.getOptions();
    const maxLength = options.maxLength;
-    const currentInput = inputObj[options.inputName];
+    const currentInput = inputObj[options.inputName || "default"];
    const condition = updatedInput.length - 1 >= maxLength;

    if (
@@ -393,7 +453,8 @@ class Utilities {
    }

    if (typeof maxLength === "object") {
-      const condition = updatedInput.length - 1 >= maxLength[options.inputName];
+      const condition =
+        updatedInput.length - 1 >= maxLength[options.inputName || "default"];

      if (options.debug) {
        console.log("maxLength (obj) reached:", condition);
@@ -451,7 +512,7 @@ class Utilities {
   * @param  {string} str The string to transform.
   */
  camelCase(str: string): string {
-    if (!str) return;
+    if (!str) return "";

    return str
      .toLowerCase()
@@ -201,4 +201,25 @@ it('PhysicalKeyboard with physicalKeyboardHighlightPress can trigger noop', () =
      tagName: "input"
    }
  }));
+});
+
+it('PhysicalKeyboard keyCodeToKey will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    physicalKeyboardHighlight: true
+  });
+
+  expect(keyboard.physicalKeyboard.keyCodeToKey(186)).toBe(";");
+
+  const methodTest = spyOn(keyboard.physicalKeyboard, "keyCodeToKey");
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    keyCode: 186,
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  expect(methodTest).toBeCalledWith(186);
 });
@@ -34,6 +34,16 @@ it('Keyboard {bksp} button will work', () => {
  expect(output).toBe("tes");
 });

+it('Keyboard {delete} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{delete}", "test", 1);
+  
+  expect(output).toBe("tst");
+});
+
 it('Keyboard {space} button will work', () => {
  setDOM();

@@ -585,3 +595,167 @@ it('Keyboard camelCase will work with empty strings', () => {
  const keyboard = new Keyboard();
  expect(keyboard.utilities.camelCase()).toBeFalsy();
 });
+
+it('Keyboard removeForwardsAt will exit out on caretPosition:0', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setInput("test");
+
+  keyboard.setCaretPosition(0);
+  keyboard.utilities.removeForwardsAt(keyboard.getInput(), 0);
+  expect(keyboard.getInput()).toBe("test");
+
+  keyboard.setInput("test");
+
+  keyboard.setCaretPosition(5);
+  keyboard.utilities.removeForwardsAt(keyboard.getInput(), 0, 0, true);
+  expect(keyboard.caretPosition).toBe(5);
+});
+
+it('Keyboard removeForwardsAt will remove multi-byte unicodes with caretPos>0', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setCaretPosition(4);
+  let output = keyboard.utilities.removeForwardsAt("test\uD83D\uDE00", 4, 4);
+  expect(output).toBe("test");
+
+  keyboard.setCaretPosition(4);
+  output = keyboard.utilities.removeForwardsAt("test\uD83D\uDE00", 4, 4, true);
+  expect(keyboard.caretPosition).toBe(4);
+});
+
+it('Keyboard removeForwardsAt will not remove multi-byte unicodes with caretPos:0', () => {
+  setDOM();
+
+  const str = "\uD83D\uDE00";
+  const keyboard = new Keyboard();
+  let output = keyboard.utilities.removeForwardsAt(str, 0);
+  expect(output).toBe("");
+
+  output = keyboard.utilities.removeForwardsAt(str, 0, 0, true);
+  expect(output).toBe("");
+});
+
+it('Keyboard removeForwardsAt will propagate caretPosition', () => {
+  clearDOM();
+
+  document.body.innerHTML = `
+    <div class="simple-keyboard"></div>
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard = new Keyboard({
+    useMouseEvents: true,
+    layout: {
+      default: ["{delete}"]
+    }
+  });
+  const keyboard2 = new Keyboard('.keyboard2');
+
+  keyboard.input.default = "hello";
+  keyboard2.input.default = "world"
+  
+  keyboard.setCaretPosition(1);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  
+  keyboard.setCaretPosition(1, 3);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(3);
+
+  keyboard.getButtonElement('{delete}').onclick();
+  
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard2.getCaretPosition()).toBe(1);
+
+  expect(keyboard.getInput()).toBe('hlo');
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  expect(keyboard2.getCaretPositionEnd()).toBe(1);
+});
+
+it('Keyboard removeForwardsAt will propagate caretPosition in a syncInstanceInputs setting', () => {
+  clearDOM();
+
+  document.body.innerHTML = `
+    <div class="simple-keyboard"></div>
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard = new Keyboard({
+    useMouseEvents: true,
+    syncInstanceInputs: true,
+    layout: {
+      default: ["{delete}"]
+    }
+  });
+  const keyboard2 = new Keyboard('.keyboard2');
+
+  keyboard.input.default = "hello"
+  
+  keyboard.setCaretPosition(1);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  
+  keyboard.setCaretPosition(1, 3);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(3);
+
+  keyboard.getButtonElement('{delete}').onclick();
+  
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard2.getCaretPosition()).toBe(1);
+
+  expect(keyboard.getInput()).toBe('hlo');
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  expect(keyboard2.getCaretPositionEnd()).toBe(1);
+});
+
+it('Keyboard removeForwardsAt will remove regular strings', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  keyboard.setCaretPosition(6);
+  let output = keyboard.utilities.removeForwardsAt("testie", 5, 5);
+  expect(output).toBe("testi");
+
+  keyboard.setCaretPosition(5);
+  output = keyboard.utilities.removeForwardsAt("testie", 5, 5, true);
+  expect(keyboard.caretPosition).toBe(5);
+});
+
+it('Keyboard removeForwardsAt will work with unset or start caretPosition', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  let output = keyboard.utilities.removeForwardsAt("test", 3);
+  expect(output).toBe("tes");
+
+  output = keyboard.utilities.removeForwardsAt("test", null, null);
+  expect(output).toBe("test");
+
+  output = keyboard.utilities.removeForwardsAt("😀", 0);
+  expect(output).toBe("");
+
+  /**
+   * Will also work with moveCaret
+   */
+  output = keyboard.utilities.removeForwardsAt("test", null, null, true);
+  expect(output).toBe("test");
+  expect(keyboard.getCaretPosition()).toBe(null);
+
+  keyboard.setCaretPosition(2);
+  const str = "😀";
+  output = keyboard.utilities.removeForwardsAt(str, null, null, true);
+  expect(output).toBe(str);
+  expect(keyboard.getCaretPosition()).toBe(2);
+});
@@ -11,7 +11,8 @@
      "suppressImplicitAnyIndexErrors": true,
      "lib": ["es2020", "dom"],
      "moduleResolution": "node",
-      "downlevelIteration": true
+      "downlevelIteration": true,
+      "strict": true
    },
    "include": ["src/lib"],
    "exclude": ["src/lib/**/tests"],
@@ -27,6 +27,7 @@ const banner = `
 module.exports = {
  mode: "production",
  entry: './src/lib/index.ts',
+  target: 'es5',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'build'),