From 182f96217a5acd1d1610099b1da14242a34a0093 Mon Sep 17 00:00:00 2001 From: melloware Date: Wed, 10 May 2023 11:32:05 -0400 Subject: [PATCH] Fix #4375: Events forward stopPropagation and preventDefault --- components/lib/autocomplete/AutoComplete.js | 16 ++++++---- components/lib/calendar/Calendar.js | 8 +++-- components/lib/checkbox/Checkbox.js | 10 ++++-- components/lib/chips/Chips.js | 18 ++++++++--- components/lib/colorpicker/ColorPicker.js | 2 +- components/lib/dropdown/Dropdown.js | 32 ++++++++++++++----- components/lib/inputmask/InputMask.js | 10 ++++-- components/lib/inputnumber/InputNumber.js | 14 +++++--- components/lib/inputswitch/InputSwitch.js | 8 +++-- components/lib/listbox/ListBox.js | 18 ++++++++--- components/lib/multiselect/MultiSelect.js | 16 ++++++---- .../multistatecheckbox/MultiStateCheckbox.js | 8 +++-- components/lib/radiobutton/RadioButton.js | 8 +++-- components/lib/rating/Rating.js | 22 +++++++++---- components/lib/selectbutton/SelectButton.js | 8 +++-- components/lib/togglebutton/ToggleButton.js | 8 +++-- components/lib/treeselect/TreeSelect.js | 16 ++++++---- .../lib/tristatecheckbox/TriStateCheckbox.js | 12 ++++--- 18 files changed, 163 insertions(+), 71 deletions(-) diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index 8818ae88a1..dfc20bf89a 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -2,15 +2,15 @@ import * as React from 'react'; import PrimeReact, { localeOption } from '../api/Api'; import { Button } from '../button/Button'; import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ChevronDownIcon } from '../icons/chevrondown'; +import { SpinnerIcon } from '../icons/spinner'; +import { TimesCircleIcon } from '../icons/timescircle'; import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { AutoCompleteBase } from './AutoCompleteBase'; import { AutoCompletePanel } from './AutoCompletePanel'; -import { ChevronDownIcon } from '../icons/chevrondown'; -import { TimesCircleIcon } from '../icons/timescircle'; -import { SpinnerIcon } from '../icons/spinner'; export const AutoComplete = React.memo( React.forwardRef((inProps, ref) => { @@ -129,8 +129,12 @@ export const AutoComplete = React.memo( props.onChange({ originalEvent: event, value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: idState, diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index a76420f166..ca05344a4b 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -1414,8 +1414,12 @@ export const Calendar = React.memo( props.onChange({ originalEvent: event, value: newValue, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index 535480385a..298d2509ec 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { useUpdateEffect } from '../hooks/Hooks'; +import { CheckIcon } from '../icons/check'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { CheckboxBase } from './CheckboxBase'; -import { CheckIcon } from '../icons/check'; export const Checkbox = React.memo( React.forwardRef((inProps, ref) => { const props = CheckboxBase.getProps(inProps); @@ -26,8 +26,12 @@ export const Checkbox = React.memo( originalEvent: event, value: props.value, checked: value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { type: 'checkbox', name: props.name, diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index 3a575c7e55..14c21dd82f 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -1,9 +1,9 @@ import * as React from 'react'; +import { TimesCircleIcon } from '../icons/timescircle'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { ChipsBase } from './ChipsBase'; -import { TimesCircleIcon } from '../icons/timescircle'; export const Chips = React.memo( React.forwardRef((inProps, ref) => { @@ -37,8 +37,12 @@ export const Chips = React.memo( props.onChange({ originalEvent: event, value: values, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, @@ -124,8 +128,12 @@ export const Chips = React.memo( props.onChange({ originalEvent: event, value: items, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js index a071ca244c..ea59e8aac3 100644 --- a/components/lib/colorpicker/ColorPicker.js +++ b/components/lib/colorpicker/ColorPicker.js @@ -3,7 +3,7 @@ import PrimeReact from '../api/Api'; import { useEventListener, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { ColorPickerBase } from './ColorPickerBase'; import { ColorPickerPanel } from './ColorPickerPanel'; diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index cac69f4cec..e6da3d6749 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -106,8 +106,12 @@ export const Dropdown = React.memo( props.onBlur({ originalEvent: event.originalEvent, value: currentValue, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.originalEvent.stopPropagation(); + }, + preventDefault: () => { + event.originalEvent.preventDefault(); + }, target: { name: props.name, id: props.id, @@ -366,8 +370,12 @@ export const Dropdown = React.memo( props.onChange({ originalEvent: event.originalEvent, value: event.target.value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.originalEvent.stopPropagation(); + }, + preventDefault: () => { + event.originalEvent.preventDefault(); + }, target: { name: props.name, id: props.id, @@ -422,8 +430,12 @@ export const Dropdown = React.memo( props.onChange({ originalEvent: event, value: undefined, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, @@ -444,8 +456,12 @@ export const Dropdown = React.memo( props.onChange({ originalEvent: event.originalEvent, value: optionValue, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.originalEvent.stopPropagation(); + }, + preventDefault: () => { + event.originalEvent.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js index dbb3751bfa..6e06351218 100644 --- a/components/lib/inputmask/InputMask.js +++ b/components/lib/inputmask/InputMask.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { InputText } from '../inputtext/InputText'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { InputMaskBase } from './InputMaskBase'; export const InputMask = React.memo( @@ -437,8 +437,12 @@ export const InputMask = React.memo( props.onChange({ originalEvent: e, value: defaultBuffer.current !== val ? val : '', - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + e.stopPropagation(); + }, + preventDefault: () => { + e.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 1d351df275..8153692c36 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1,12 +1,12 @@ import * as React from 'react'; import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { AngleDownIcon } from '../icons/angledown'; +import { AngleUpIcon } from '../icons/angleup'; import { InputText } from '../inputtext/InputText'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, ObjectUtils, IconUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { InputNumberBase } from './InputNumberBase'; -import { AngleUpIcon } from '../icons/angleup'; -import { AngleDownIcon } from '../icons/angledown'; export const InputNumber = React.memo( React.forwardRef((inProps, ref) => { @@ -893,8 +893,12 @@ export const InputNumber = React.memo( props.onValueChange({ originalEvent: event, value: value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index 0e389cc6c0..75959e598e 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -30,8 +30,12 @@ export const InputSwitch = React.memo( props.onChange({ originalEvent: event, value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index 8c871a21f3..0ec7aa157b 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { FilterService, localeOption } from '../api/Api'; import { useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { ListBoxBase } from './ListBoxBase'; import { ListBoxHeader } from './ListBoxHeader'; @@ -96,8 +96,12 @@ export const ListBox = React.memo( props.onChange({ originalEvent: event, value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, @@ -132,8 +136,12 @@ export const ListBox = React.memo( props.onChange({ originalEvent: event, value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index b46321f5b6..1d8ad5e0c7 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -1,14 +1,14 @@ import * as React from 'react'; import PrimeReact, { FilterService } from '../api/Api'; import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ChevronDownIcon } from '../icons/chevrondown'; +import { TimesIcon } from '../icons/times'; +import { TimesCircleIcon } from '../icons/timescircle'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { MultiSelectBase } from './MultiSelectBase'; import { MultiSelectPanel } from './MultiSelectPanel'; -import { TimesCircleIcon } from '../icons/timescircle'; -import { TimesIcon } from '../icons/times'; -import { ChevronDownIcon } from '../icons/chevrondown'; export const MultiSelect = React.memo( React.forwardRef((inProps, ref) => { @@ -216,8 +216,12 @@ export const MultiSelect = React.memo( originalEvent: event, value, selectedOption, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js index 8c91ef73e4..6c0b8d2b84 100644 --- a/components/lib/multistatecheckbox/MultiStateCheckbox.js +++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js @@ -48,8 +48,12 @@ export const MultiStateCheckbox = React.memo( props.onChange({ originalEvent: event, value: newValue, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 80318c3f32..f8a7d7dc97 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -30,8 +30,12 @@ export const RadioButton = React.memo( originalEvent: e, value: props.value, checked: value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + e.stopPropagation(); + }, + preventDefault: () => { + e.preventDefault(); + }, target: { type: 'radio', name: props.name, diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index 0174540ce5..3afa480adf 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -1,10 +1,10 @@ import * as React from 'react'; +import { BanIcon } from '../icons/ban'; +import { StarIcon } from '../icons/star'; +import { StarFillIcon } from '../icons/starfill'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { RatingBase } from './RatingBase'; -import { StarIcon } from '../icons/star'; -import { StarFillIcon } from '../icons/starfill'; -import { BanIcon } from '../icons/ban'; export const Rating = React.memo( React.forwardRef((inProps, ref) => { @@ -19,8 +19,12 @@ export const Rating = React.memo( props.onChange({ originalEvent: event, value: i, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, @@ -37,8 +41,12 @@ export const Rating = React.memo( props.onChange({ originalEvent: event, value: null, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js index 98751c50be..f4746136db 100644 --- a/components/lib/selectbutton/SelectButton.js +++ b/components/lib/selectbutton/SelectButton.js @@ -36,8 +36,12 @@ export const SelectButton = React.memo( props.onChange({ originalEvent: event.originalEvent, value: newValue, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.originalEvent.stopPropagation(); + }, + preventDefault: () => { + event.originalEvent.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js index a1ec9232cb..d7e7578b8a 100644 --- a/components/lib/togglebutton/ToggleButton.js +++ b/components/lib/togglebutton/ToggleButton.js @@ -19,8 +19,12 @@ export const ToggleButton = React.memo( props.onChange({ originalEvent: e, value: !props.checked, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + e.stopPropagation(); + }, + preventDefault: () => { + e.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js index 7f6fc56a91..a089b104ab 100644 --- a/components/lib/treeselect/TreeSelect.js +++ b/components/lib/treeselect/TreeSelect.js @@ -1,15 +1,15 @@ import * as React from 'react'; import PrimeReact, { localeOption } from '../api/Api'; import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ChevronDownIcon } from '../icons/chevrondown'; +import { SearchIcon } from '../icons/search'; +import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; import { Tree } from '../tree/Tree'; -import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { TreeSelectBase } from './TreeSelectBase'; import { TreeSelectPanel } from './TreeSelectPanel'; -import { ChevronDownIcon } from '../icons/chevrondown'; -import { SearchIcon } from '../icons/search'; -import { TimesIcon } from '../icons/times'; export const TreeSelect = React.memo( React.forwardRef((inProps, ref) => { @@ -79,8 +79,12 @@ export const TreeSelect = React.memo( props.onChange({ originalEvent: event.originalEvent, value: event.value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.originalEvent.stopPropagation(); + }, + preventDefault: () => { + event.originalEvent.preventDefault(); + }, target: { name: props.name, id: props.id, diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index 037dda34b9..bd3eca1da3 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; +import { CheckIcon } from '../icons/check'; +import { TimesIcon } from '../icons/times'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { TriStateCheckboxBase } from './TriStateCheckboxBase'; -import { TimesIcon } from '../icons/times'; -import { CheckIcon } from '../icons/check'; export const TriStateCheckbox = React.memo( React.forwardRef((inProps, ref) => { @@ -30,8 +30,12 @@ export const TriStateCheckbox = React.memo( props.onChange({ originalEvent: event, value: newValue, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { + event.stopPropagation(); + }, + preventDefault: () => { + event.preventDefault(); + }, target: { name: props.name, id: props.id,