@axinom/mosaic-ui 0.49.0-rc.8 → 0.49.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.49.0-rc.8",
+  "version": "0.49.0-rc.9",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.22-rc.8",
+    "@axinom/mosaic-core": "^0.4.22-rc.9",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ce675d991f9ec931f00c32473a8fbf52136e6f3"
+  "gitHead": "a448af71faaf175908d9228bc1c1d32be65f9e2d"
 }

package/src/components/Filters/Filter/Filter.tsx

@@ -21,6 +21,7 @@ import { SearcheableOptionsFilter } from '../SelectionTypes/SearcheableOptionsFi
 import classes from './Filter.scss';
 
 export interface FilterProps<T extends Data> {
+  selectOnFocus?: boolean;
   options: FilterType<T>;
   value?: FilterValue;
   index?: number;
@@ -42,6 +43,7 @@ export const Filter = <T extends Data>({
   onFilterChange,
   onFilterClicked,
   onValidate,
+  selectOnFocus = true,
 }: PropsWithChildren<FilterProps<T>>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
@@ -116,6 +118,7 @@ export const Filter = <T extends Data>({
             }
             onError={onError}
             onValidate={onValidate}
+            selectOnFocus={selectOnFocus}
           />
         );
 

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.spec.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { noop } from '../../../../helpers/utils';
 import { FreeTextFilter } from './FreeTextFilter';
@@ -42,4 +42,19 @@ describe('FreeTextFilter', () => {
 
     expect(error).toBeDefined();
   });
+
+  it('selects text on focus when selectOnFocus is true and there is a value', () => {
+    const mockValue = 'test value';
+    const spy = jest.fn();
+
+    const wrapper = mount(
+      <FreeTextFilter onSelect={spy} value={mockValue} selectOnFocus={true} />,
+    );
+    const input = wrapper.find('input');
+    input.simulate('focus');
+
+    const inputElement = input.getDOMNode<HTMLInputElement>();
+    expect(inputElement.selectionStart).toBe(0);
+    expect(inputElement.selectionEnd).toBe(mockValue.length);
+  });
 });

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { KeyboardEventHandler, useState } from 'react';
+import React, { KeyboardEventHandler, useRef, useState } from 'react';
 import { noop } from '../../../../helpers/utils';
 import { FilterValidationResult, FilterValue } from '../../Filters.model';
 import classes from './FreeTextFilter.scss';
@@ -17,6 +17,8 @@ export interface FreeTextFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+  /** Select text on focus if true (default: true) */
+  selectOnFocus?: boolean;
 }
 
 export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
@@ -25,11 +27,19 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  selectOnFocus = true,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
 
   const [valueLocal, setValue] = useState(value || '');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onFocusWrapper = (): void => {
+    if (selectOnFocus && valueLocal) {
+      inputRef.current?.select();
+    }
+  };
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (e.key === ENTER_KEY) {
@@ -55,11 +65,13 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
       )}
     >
       <input
+        ref={inputRef}
         autoFocus
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}
         onKeyDown={handleKeyDown}
         value={valueLocal as string}
         onChange={(e) => setValue(e.target.value)}
+        onFocus={onFocusWrapper}
       />
       {errorMsg !== undefined && <small>{errorMsg}</small>}
     </div>