fix #16, release v1.5.0

smastrom · Jan 28, 2024 · c0baf1b · c0baf1b
1 parent e1f7cf8
commit c0baf1b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -270,15 +270,16 @@ function App() {
 
 ### :cyclone: Core
 
-| :thinking:          | Prop            | Description                                                                | Type                                            | Default   | Required                        |
-| ------------------- | --------------- | -------------------------------------------------------------------------- | ----------------------------------------------- | --------- | ------------------------------- |
-| :green_circle:      | `value`         | An integer from 0 to `items`. It can be a float if `readOnly` is **true**. | number                                          | undefined | :white_check_mark:              |
-| :large_blue_circle: | `onChange`      | Setter or custom function to update the rating.                            | RatingChange                                    | () => {}  | Only if `readOnly` is **false** |
-| :large_blue_circle: | `onHoverChange` | Callback to execute while navigating the rating items.                     | (hoveredValue: number) => void                  | () => {}  | :x:                             |
-| :green_circle:      | `items`         | Rating items to display.                                                   | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 | 5         | :x:                             |
-| :green_circle:      | `readOnly`      | Whether to render an accessible image element or not.                      | boolean                                         | false     | :x:                             |
-| :large_blue_circle: | `isDisabled`    | Whether to disable the radio group or not.                                 | boolean                                         | false     | :x:                             |
-| :large_blue_circle: | `isRequired`    | Whether users should be able to set rating to 0 or not.                    | boolean                                         | false     | :x:                             |
+| :thinking:          | Prop             | Description                                                                    | Type                                            | Default   | Required                        |
+| ------------------- | ---------------- | ------------------------------------------------------------------------------ | ----------------------------------------------- | --------- | ------------------------------- |
+| :green_circle:      | `value`          | An integer from 0 to `items`. It can be a float if `readOnly` is **true**.     | number                                          | undefined | :white_check_mark:              |
+| :large_blue_circle: | `onChange`       | Setter or custom function to update the rating.                                | RatingChange                                    | () => {}  | Only if `readOnly` is **false** |
+| :large_blue_circle: | `onHoverChange`  | Callback to execute while navigating the rating items.                         | (hoveredValue: number) => void                  | () => {}  | :x:                             |
+| :green_circle:      | `items`          | Rating items to display.                                                       | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 | 5         | :x:                             |
+| :green_circle:      | `readOnly`       | Whether to render an accessible image element or not.                          | boolean                                         | false     | :x:                             |
+| :large_blue_circle: | `isDisabled`     | Whether to disable the radio group or not.                                     | boolean                                         | false     | :x:                             |
+| :large_blue_circle: | `isRequired`     | Whether users should be able to set rating to 0 or not.                        | boolean                                         | false     | :x:                             |
+| :green_circle:      | `preventDefault` | Whether or not to call `event.preventDefault` on click and Enter/Space select. | `click` \| `keydown` \| `all` \| `none`         | `all`     | :x:                             |
 
 `ref`, `id`, `className`, `style`, `onBlur`, `onFocus` are also available.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@smastrom/react-rating",
-   "version": "1.4.0",
+   "version": "1.5.0",
    "private": false,
    "keywords": [
       "react",

diff --git a/src/Rating.tsx b/src/Rating.tsx
@@ -56,6 +56,7 @@ export const Rating: typeof RatingComponent = forwardRef<HTMLDivElement, RatingP
          onHoverChange = noop,
          onFocus = noop,
          onBlur = noop,
+         preventDefault = 'all',
          isDisabled = false,
          highlightOnlySelected = false,
          orientation = OrientationProps.HORIZONTAL,
@@ -232,7 +233,9 @@ export const Rating: typeof RatingComponent = forwardRef<HTMLDivElement, RatingP
       }
 
       function handleStarClick(event: MouseEvent, clickedIndex: number) {
-         event.preventDefault()
+         if (preventDefault === 'all' || preventDefault === 'keydown') {
+            event.preventDefault()
+         }
          event.stopPropagation()
 
          if (!isRequired && activeStarIndex === clickedIndex) {
@@ -318,11 +321,12 @@ export const Rating: typeof RatingComponent = forwardRef<HTMLDivElement, RatingP
 
             case 'Enter':
             case 'Space':
-               event.preventDefault()
+               if (preventDefault === 'all' || preventDefault === 'click') {
+                  event.preventDefault()
+               }
                return onChange(isResetBtn ? 0 : childIndex + 1)
          }
 
-         event.preventDefault()
          event.stopPropagation()
       }
 

diff --git a/src/exportedTypes.ts b/src/exportedTypes.ts
@@ -110,6 +110,8 @@ export type InputProps = {
    visibleItemLabelIds?: string[]
    /** Accessible label for the invisible reset radio. Effective if `isRequired` is set to **false**. */
    resetLabel?: string
+   /** Whether or not to call event.preventDefault on click and Enter/Space select. */
+   preventDefault?: 'click' | 'keydown' | 'all' | 'none'
 }
 
 export type RatingProps = SharedProps & ReadOnlyProps & InputProps