added event keydown to prevent < or >

packages/x-components/src/x-modules/search-box/components/search-input.vue

@@ -7,6 +7,7 @@
     @input="emitUserIsTypingAQueryEvents"
     @keydown.enter="emitUserPressedEnterKey"
     @keydown.up.down.prevent="emitUserPressedArrowKey"
+    @beforeinput="preventSpecialKey"
     v-on="$listeners"
     :maxlength="maxLength"
     :value="query"
@@ -90,7 +91,7 @@
     /**
      * When event {@link XEventsTypes.UserReachedEmpathizeTop} or
      * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}
-     * are emitted the search in put is focused.
+     * are emitted the search input is focused.
      *
      * @internal
      */
@@ -235,6 +236,18 @@
     protected emitUserAcceptedAQuery(query: string): void {
       this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());
     }
+
+    /**
+     * Prevents the user from either typing or pasting special characters in the input field.
+     *
+     * @internal
+     * @param event - The event that will be checked for special characters.
+     */
+    protected preventSpecialKey(event: InputEvent): void {
+      if (/[<>]/.test(event.data ?? '')) {
+        event.preventDefault();
+      }
+    }
   }
 </script>
 

packages/x-components/tests/unit/search-input-mock.spec.ts

@@ -0,0 +1,50 @@
+import { mount } from '@cypress/vue';
+import Vue from 'vue';
+import { XPlugin } from '../../src/plugins/x-plugin';
+import { BaseXBus } from '../../src/plugins/x-bus';
+import { e2eAdapter } from '../../src/adapter/e2e-adapter';
+import SearchInput from '../../src/x-modules/search-box/components/search-input.vue';
+import { searchBoxXModule } from '../../src/x-modules/search-box';
+
+/**
+ * Renders an {@link SearchInput} component with the provided options.
+ *
+ * @returns Helper methods for the rendered {@link SearchInput}.
+ */
+function mountSearchInput(): MountSearchInputAPI {
+  XPlugin.resetInstance();
+  mount(
+    {
+      components: {
+        SearchInput
+      },
+      template: `
+        <SearchInput />
+      `
+    },
+    {
+      vue: Vue.extend({}),
+      plugins: [
+        [new XPlugin(new BaseXBus()), { adapter: e2eAdapter, initialXModules: [searchBoxXModule] }]
+      ]
+    }
+  );
+
+  return {
+    getSearchInput() {
+      return cy.getByDataTest('search-input');
+    }
+  };
+}
+
+describe('testing search input', () => {
+  it('ignores invalid typed characters', () => {
+    const { getSearchInput } = mountSearchInput();
+    getSearchInput().type('le<g>o >star>').invoke('val').should('equal', 'lego star');
+  });
+});
+
+interface MountSearchInputAPI {
+  /** Mounts search input api. */
+  getSearchInput: () => Cypress.Chainable<JQuery>;
+}