(fix): ui-toolkit - Select component added readOnly prop

packages/ui-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/ui-toolkit",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "A lightning nature UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/ui-toolkit/src/components/atoms/Select/Select.tsx

@@ -58,7 +58,8 @@ class Select extends React.PureComponent<Props> {
       optionsParentClass,
       activeOptionBoxClass,
       activeIndex,
-      dataTestId
+      dataTestId,
+      readonly
     } = this.props;
 
     let selectedOption = null;
@@ -85,6 +86,7 @@ class Select extends React.PureComponent<Props> {
                 <KeyboardArrowDown size={22}/>
 
                 <input
+                  readOnly={readonly}
                   value={selectedOption?.value}
                   onKeyUp={this.onKeyUp}
                   onKeyDown={this.onKeyDown}
@@ -195,7 +197,8 @@ Select.defaultProps = {
   optionsParentClass: '',
   activeOptionBoxClass: '',
   onChange: () => {},
-  dataTestId: ''
+  dataTestId: '',
+  readonly: false
 } as DefaultProps;
 
 
@@ -219,6 +222,8 @@ type DefaultProps = {
   activeOptionBoxClass: string;
   onChange:(e:React.ChangeEvent<HTMLInputElement>)=> void;
   dataTestId: string;
+  /* readonly is useful for phone devices where we are showing data from our own like dropdown */
+  readonly: boolean;
 }
 
 export type Props = RequiredProps & DefaultProps;