feat: add onBlur and onFocus props to Select and Checkbox

Author: phamhieu

src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,8 @@ interface InputProps {
   checked?: boolean
   className?: string
   onChange?(x: React.ChangeEvent<HTMLInputElement>): void
+  onFocus?: any
+  onBlur?: any
   size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
 }
 
@@ -94,6 +96,8 @@ export function Checkbox({
   checked,
   value,
   onChange,
+  onFocus,
+  onBlur,
   size = 'medium',
 }: InputProps) {
   const inputName = name
@@ -140,6 +144,8 @@ export function Checkbox({
               type="checkbox"
               className={CheckboxStyles['sbui-checkbox']}
               onChange={onInputChange}
+              onFocus={onFocus ? (event) => onFocus(event) : undefined}
+              onBlur={onBlur ? (event) => onBlur(event) : undefined}
               checked={active}
               value={value ? value : markupId}
             />

src/components/Select/Select.tsx

@@ -35,6 +35,8 @@ export interface Props {
   layout?: 'horizontal' | 'vertical'
   name?: string
   onChange?: any
+  onFocus?: any
+  onBlur?: any
   placeholder?: string
   style?: React.CSSProperties
   type?:
@@ -80,6 +82,8 @@ function Select({
   layout,
   name,
   onChange,
+  onFocus,
+  onBlur,
   placeholder,
   required,
   value,
@@ -110,7 +114,9 @@ function Select({
           autoComplete={autoComplete}
           autoFocus={autofocus}
           className={selectClasses.join(' ')}
-          onChange={(event) => onChange(event)}
+          onChange={onChange ? (event) => onChange(event) : undefined}
+          onFocus={onFocus ? (event) => onFocus(event) : undefined}
+          onBlur={onBlur ? (event) => onBlur(event) : undefined}
           ref={inputRef}
           value={value}
           disabled={disabled}