React-React tappable: Tappable component for React

React-Tappable

Tappable component for React. Abstracts touch events to implement onTap, onPress, and pinch events.

The events mimic their native equivalents as closely as possible:

  • the baseClass (default: Tappable) has -active or -inactive added to it to enable pressed-state styling
  • the pressed state is visually cancelled if the touch moves too far away from the element, but resumes if the touch comes back again
  • when you start scrolling a parent element, the touch event is cancelled
  • if the onPress property is set, it will cancel the touch event after the press happens

When touch events are not supported, it will fall back to mouse events. Keyboard events are also supported, emulating the behaviour of native button controls.

Demo & Examples

Live demo: jedwatson.github.io/react-tappable

To build the examples locally, run:

npm install
gulp dev

Then open localhost:8000 in a browser.

Installation

The easiest way to use React-tappable is to install it from npm.

npm install react-tappable --save

Ensure to include it in your own React build process (using Browserify, etc).

You could also use the standalone build by including dist/react-tappable.js in your page; but, if you do this, make sure you have already included React, and that it is available globally.

Usage

React-tappable generates a React component (defaults to <span>) and binds touch events to it.

To disable default event handling (e.g. scrolling) set the preventDefault prop.

import Tappable from 'react-tappable';

<Tappable onTap={this.handleTapEvent}>Tap me</Tappable>

For a lighter component, you can opt-in to just the features you need:

import Tappable from 'react-tappable/lib/Tappable';
import Pinchable from 'react-tappable/lib/Pinchable';
import TapAndPinchable from 'react-tappable/lib/TapAndPinchable';

<Tappable onTap={this.handleTapEvent}>I respond to Tap events</Tappable>
<Pinchable onPinch={this.handlePinch}>I respond to Pinch events</Pinchable>
<TapAndPinchable onTap={this.handleTapEvent} onPinch={this.handlePinch}>In respond to both!</TapAndPinchable>

The TapAndPinchable component is the default one you get when you just import react-tappable.

Properties

  • activeDelay ms delay before the -active class is added, defaults to 0
  • component component to render, defaults to 'span'
  • classes optional object containing active and inactive class names to apply to the component; useful with css-modules
  • classBase base to use for the active/inactive classes
  • className optional class name for the component
  • moveThreshold px to allow movement before cancelling a tap; defaults to 100
  • pressDelay ms delay before a press event is detected, defaults to 1000
  • pressMoveThreshold px to allow movement before ignoring long presses; defaults to 5
  • preventDefault (boolean) automatically call preventDefault on all events
  • stopPropagation (boolean) automatically call stopPropagation on all events
  • style (object) styles to apply to the component

Special Events

These are the special events implemented by Tappable.

  • onTap fired when touchStart or mouseDown is followed by touchEnd or mouseUp within the moveThreshold
  • onPress fired when a touch is held for the specified ms
  • onPinchStart fired when two fingers land on the screen
  • onPinchMove fired on any movement while two fingers are on screen
  • onPinchEnd fired when less than two fingers are left on the screen, onTouchStart is triggerred, if one touch remains

Pinch Events

Pinch events come with a special object with additional data to actually be more useful than the native events:

  • touches: Array of Objects - {identifier, pageX, pageY} - raw data from the event
  • center: Object - {x, y} - Calculated center between the two touch points
  • angle: Degrees - angle of the line connecting the two touch points to the X-axis
  • distance: Number of pixels - beween the two touch points
  • displacement: Object {x, y} - offset of the center since the pinch began
  • displacementVelocity: Object {x, y} : Pixels/ms - Immediate velocity of the displacement
  • rotation: degrees - delta rotation since the beginning of the gesture
  • rotationVelocity: degrees/millisecond - immediate rotational velocity
  • zoom: Number - Zoom factor - ratio between distance between the two touch points now over initial
  • zoomVelocity: zoomFactor/millisecond - immediate velocity of zooming
  • time: milliseconds since epoch - Timestamp

Known Issues

  • The pinch implementation has not been thoroughly tested
  • Any touch event with 3 three or more touches is completely ignored.

Native Events

The following native event handlers can also be specified.

  • onKeyDown
  • onKeyUp
  • onTouchStart
  • onTouchMove
  • onTouchEnd
  • onMouseDown
  • onMouseUp
  • onMouseMove
  • onMouseOut

Returning false from onKeyDown, onMouseDown, or onTouchStart handlers will prevent Tappable from handling the event.

Changelog

See CHANGES.md

License

Copyright (c) 2017 Jed Watson. MIT

Comments

  • input[type=
    input[type="text"] does not blur on clicking an outside Tappable component

    Jul 9, 2018

    When Your DOM consists of text inputs (or elements with contenteditable="true" attribute) and one of them is focused, normally, outside click will blur it. But if You outside click a Tappable component - blur won't fire and focus'll persist.

    Gist reproducing the issue: https://codepen.io/anon/pen/MBgemQ

    Reply
  • Why moveThreshold={100} and pressMoveThreshold={5}
    Why moveThreshold={100} and pressMoveThreshold={5}

    Dec 15, 2018

    In our application we create a large scrollable list of tappable tiles and sometimes, when a user attempts to stop their fast scrolling action by pressing on the screen this gets registered as a tap.

    Is there any reason not to lower moveThreshold to 5 as well?

    Reply
  • onMouseMove only fires when mouse is pressed
    onMouseMove only fires when mouse is pressed

    Jan 31, 2019

    In the source I found the following code for handling the mousemove event:

    onMouseMove: function (event) {
    	if (window._blockMouseEvents || !this._mouseDown) return;
    	this.processEvent(event);
    	this.props.onMouseMove && this.props.onMouseMove(event);
    },
    

    Why is it necessary to check if the mouse is pressed (!this._mouseDown)? I would like to listen to mousemove events when the mouse is not down which is not possible now. Can somebody try to explain the reasoning behind this?

    Reply
  • Remove dependency on react-create-class
    Remove dependency on react-create-class

    Apr 16, 2019

    This package is the only one left in our projects still depending on react-create-class.

    Would it be possible to remove this dependency?

    question / help / docs 
    Reply
  • Elements sitting within and above the tappable area need to override (nested Tappable)
    Elements sitting within and above the tappable area need to override (nested Tappable)

    Jul 26, 2019

    An element that sits inside a tappable area with a higher zindex should take precedence and not trigger the tappable event inside it. In my case the underlying "card" layer is tappable as a whole but there is a button element that should have its own tap action.

    stopPropagation doesn't seem to do anything. There really should be a "bubble" level specification.

    <Tappable>
        Card layer divs tappable
        <Tappable><Button> zIndex = 100, does its own thing, Card layer ignored</Button></Tappable>
    </Tappable>
    
    Reply
  • bug: PinchEvent  angle NaN
    bug: PinchEvent angle NaN

    Aug 26, 2019

                                                                                                                                                                                                           
    Reply
  • Bump eslint from 1.10.3 to 6.6.0
    Bump eslint from 1.10.3 to 6.6.0

    Nov 1, 2019

    Bumps eslint from 1.10.3 to 6.6.0.

    Release notes

    Sourced from eslint's releases.

    v6.6.0

    • 39dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12280) (Scott O'Hara)
    • 4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477) (Milos Djermanovic)
    • c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480) (Milos Djermanovic)
    • 0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347) (Milos Djermanovic)
    • c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379) (Milos Djermanovic)
    • 364877b Update: measure plugin loading time and output in debug message (#12395) (Victor Homyakov)
    • 1744fab Fix: operator-assignment removes and duplicates comments (#12485) (Milos Djermanovic)
    • 52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483) (Milos Djermanovic)
    • 0f6d0dc Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468) (Toru Nagashima)
    • 923a8cb Chore: Fix lint failure in JSDoc comment (#12489) (Brandon Mills)
    • aac3be4 Update: Add ignored prop regex no-param-reassign (#11275) (Luke Bennett)
    • e5382d6 Chore: Remove unused parameter in dot-location (#12464) (Milos Djermanovic)
    • 49faefb Fix: no-obj-calls false positive (fixes #12437) (#12467) (Toru Nagashima)
    • b3dbd96 Fix: problematic installation issue (fixes #11018) (#12309) (Toru Nagashima)
    • cd7c29b Sponsors: Sync README with website (ESLint Jenkins)
    • 8233873 Docs: Add note about Node.js requiring SSL support (fixes #11413) (#12475) (Nicholas C. Zakas)
    • 89e8aaf Fix: improve report location for no-tabs (#12471) (Milos Djermanovic)
    • 7dffe48 Update: Enable function string option in comma-dangle (fixes #12058) (#12462) (YeonJuan)
    • e15e1f9 Docs: fix doc for no-unneeded-ternary rule (fixes #12098) (#12410) (Sam Rae)
    • b1dc58f Sponsors: Sync README with website (ESLint Jenkins)
    • 61749c9 Chore: Provide debug log for parser errors (#12474) (Brad Zacher)
    • 7c8bbe0 Update: enforceForOrderingRelations no-unsafe-negation (fixes #12163) (#12414) (Sam Rae)
    • 349ed67 Update: improve report location for no-mixed-operators (#12328) (Chiawen Chen)
    • a102eaa Fix: prefer-numeric-literals invalid autofix with adjacent tokens (#12387) (Milos Djermanovic)
    • 6e7c18d Update: enforceForNewInMemberExpressions no-extra-parens (fixes #12428) (#12436) (Milos Djermanovic)
    • 51fbbd7 Fix: array-bracket-newline consistent error with comments (fixes #12416) (#12441) (Milos Djermanovic)
    • e657d4c Fix: report full dot location in dot-location (#12452) (Milos Djermanovic)
    • 2d6e345 Update: make isSpaceBetweenTokens() ignore newline in comments (#12407) (YeonJuan)
    • 84f71de Update: remove default overrides in keyword-spacing (fixes #12369) (#12411) (YeonJuan)
    • 18a0b0e Update: improve report location for no-space-in-parens (#12364) (Chiawen Chen)
    • d61c8a5 Update: improve report location for no-multi-spaces (#12329) (Chiawen Chen)
    • 561093f Upgrade: bump inquirer to ^7.0.0 (#12440) (Joe Graham)
    • fb633b2 Chore: Add a script for testing with more control (#12444) (Eric Wang)
    • 012ec51 Sponsors: Sync README with website (ESLint Jenkins)
    • 874fe16 New: pass cwd from cli engine (#12389) (Eric Wang)
    • b962775 Update: no-self-assign should detect member expression with this (#12279) (Tibor Blenessy)
    • 02977f2 Docs: Clarify eslint:recommended semver policy (#12429) (Kevin Partington)
    • 97045ae Docs: Fixes object type for rules in "Use a Plugin" (#12409) (Daisy Develops)
    • 24ca088 Docs: Fix typo in v6 migration guide (#12412) (Benjamim Sonntag)
    • b094008 Chore: update version parameter name (#12402) (Toru Nagashima)
    • e5637ba Chore: enable jsdoc/require-description (#12365) (Kai Cataldo)
    • d31f337 Sponsors: Sync README with website (ESLint Jenkins)
    • 7ffb22f Chore: Clean up inline directive parsing (#12375) (Jordan Eldredge)
    • 84467c0 Docs: fix wrong max-depth example (fixes #11991) (#12358) (Gabriel R Sezefredo)
    • 3642342 Docs: Fix minor formatting/grammar errors (#12371) (cherryblossom000)
    • c47fa0d Docs: Fix missing word in sentence (#12361) (Dan Boulet)
    • 8108f49 Chore: enable additional eslint-plugin-jsdoc rules (#12336) (Kai Cataldo)
    • b718d2e Chore: update issue template with --eslint-fix flag (#12352) (James George)
    • 20ba14d Sponsors: Sync README with website (ESLint Jenkins)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v6.6.0 - October 25, 2019

    • 39dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12280) (Scott O'Hara)
    • 4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477) (Milos Djermanovic)
    • c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480) (Milos Djermanovic)
    • 0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347) (Milos Djermanovic)
    • c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379) (Milos Djermanovic)
    • 364877b Update: measure plugin loading time and output in debug message (#12395) (Victor Homyakov)
    • 1744fab Fix: operator-assignment removes and duplicates comments (#12485) (Milos Djermanovic)
    • 52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483) (Milos Djermanovic)
    • 0f6d0dc Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468) (Toru Nagashima)
    • 923a8cb Chore: Fix lint failure in JSDoc comment (#12489) (Brandon Mills)
    • aac3be4 Update: Add ignored prop regex no-param-reassign (#11275) (Luke Bennett)
    • e5382d6 Chore: Remove unused parameter in dot-location (#12464) (Milos Djermanovic)
    • 49faefb Fix: no-obj-calls false positive (fixes #12437) (#12467) (Toru Nagashima)
    • b3dbd96 Fix: problematic installation issue (fixes #11018) (#12309) (Toru Nagashima)
    • cd7c29b Sponsors: Sync README with website (ESLint Jenkins)
    • 8233873 Docs: Add note about Node.js requiring SSL support (fixes #11413) (#12475) (Nicholas C. Zakas)
    • 89e8aaf Fix: improve report location for no-tabs (#12471) (Milos Djermanovic)
    • 7dffe48 Update: Enable function string option in comma-dangle (fixes #12058) (#12462) (YeonJuan)
    • e15e1f9 Docs: fix doc for no-unneeded-ternary rule (fixes #12098) (#12410) (Sam Rae)
    • b1dc58f Sponsors: Sync README with website (ESLint Jenkins)
    • 61749c9 Chore: Provide debug log for parser errors (#12474) (Brad Zacher)
    • 7c8bbe0 Update: enforceForOrderingRelations no-unsafe-negation (fixes #12163) (#12414) (Sam Rae)
    • 349ed67 Update: improve report location for no-mixed-operators (#12328) (Chiawen Chen)
    • a102eaa Fix: prefer-numeric-literals invalid autofix with adjacent tokens (#12387) (Milos Djermanovic)
    • 6e7c18d Update: enforceForNewInMemberExpressions no-extra-parens (fixes #12428) (#12436) (Milos Djermanovic)
    • 51fbbd7 Fix: array-bracket-newline consistent error with comments (fixes #12416) (#12441) (Milos Djermanovic)
    • e657d4c Fix: report full dot location in dot-location (#12452) (Milos Djermanovic)
    • 2d6e345 Update: make isSpaceBetweenTokens() ignore newline in comments (#12407) (YeonJuan)
    • 84f71de Update: remove default overrides in keyword-spacing (fixes #12369) (#12411) (YeonJuan)
    • 18a0b0e Update: improve report location for no-space-in-parens (#12364) (Chiawen Chen)
    • d61c8a5 Update: improve report location for no-multi-spaces (#12329) (Chiawen Chen)
    • 561093f Upgrade: bump inquirer to ^7.0.0 (#12440) (Joe Graham)
    • fb633b2 Chore: Add a script for testing with more control (#12444) (Eric Wang)
    • 012ec51 Sponsors: Sync README with website (ESLint Jenkins)
    • 874fe16 New: pass cwd from cli engine (#12389) (Eric Wang)
    • b962775 Update: no-self-assign should detect member expression with this (#12279) (Tibor Blenessy)
    • 02977f2 Docs: Clarify eslint:recommended semver policy (#12429) (Kevin Partington)
    • 97045ae Docs: Fixes object type for rules in "Use a Plugin" (#12409) (Daisy Develops)
    • 24ca088 Docs: Fix typo in v6 migration guide (#12412) (Benjamim Sonntag)
    • b094008 Chore: update version parameter name (#12402) (Toru Nagashima)
    • e5637ba Chore: enable jsdoc/require-description (#12365) (Kai Cataldo)
    • d31f337 Sponsors: Sync README with website (ESLint Jenkins)
    • 7ffb22f Chore: Clean up inline directive parsing (#12375) (Jordan Eldredge)
    • 84467c0 Docs: fix wrong max-depth example (fixes #11991) (#12358) (Gabriel R Sezefredo)
    • 3642342 Docs: Fix minor formatting/grammar errors (#12371) (cherryblossom000)
    • c47fa0d Docs: Fix missing word in sentence (#12361) (Dan Boulet)
    • 8108f49 Chore: enable additional eslint-plugin-jsdoc rules (#12336) (Kai Cataldo)
    • b718d2e Chore: update issue template with --eslint-fix flag (#12352) (James George)
    ... (truncated)
    Commits
    • 879c373 6.6.0
    • c8ba30a Build: changelog update for 6.6.0
    • 39dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12...
    • 4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477)
    • c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12...
    • 0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12...
    • c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379)
    • 364877b Update: measure plugin loading time and output in debug message (#12395)
    • 1744fab Fix: operator-assignment removes and duplicates comments (#12485)
    • 52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483)
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by eslintbot, a new releaser for eslint since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Fixed usage of deprecated React lifecycle method componentWillUpdate
    Fixed usage of deprecated React lifecycle method componentWillUpdate

    Nov 16, 2019

                                                                                                                                                                                                           
    Reply
  • Is this library still being developed? And is a library like this still necessary?
    Is this library still being developed? And is a library like this still necessary?

    Jan 4, 2020

    I understand all people involved with this library are all super busy. I mean, the amount of @JedWatson initiated projects is insane! So very understandable some projects can't be supported anymore. I was just wondering if that is the case for this project as there hasn't been any activity the last 2 years. Also the project has some issues that make it a bit hard to recommend to other people to use. So I am also wondering: is a library like this still needed? I also noticed hammerjs has stopped development and I wondering why. Because with vanilla react I have some issues correctly triggering taps/clicks. So if this is not the goto library anymore, which one is? I would love to hear from any of you!

    Reply
  • Spacebar triggers Tappable when wrapping an input field
    Spacebar triggers Tappable when wrapping an input field

    Apr 30, 2020

    <Tappable onTap={}>
    <input type="text" />
    </Tappable>
    

    Workaround is to not wrap Tappable around the Input and just overlay.

    Reply
  • Bug while calling e.preventDefault
    Bug while calling e.preventDefault

    Jul 21, 2015

    I have this: <Tappable onTap={this.onTap}>{element}</Tappable>;

    When my listener is:

        onTap: function(e) {
            console.error("tap!",e);
            e.preventDefault();
            this.props.onTap(e);
        },
    

    I get an error:

    tap! SyntheticTouchEvent {dispatchConfig: null, dispatchMarker: null, nativeEvent: null, type: null, target: null…} touchable.jsx:22
    Uncaught TypeError: Cannot read property 'preventDefault' of null 
    

    It is not the e that is null, but calling e.preventDefault(); calls this internal SyntheticTouchEvent function:

      preventDefault: function() {
        this.defaultPrevented = true;
        var event = this.nativeEvent;
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
        this.isDefaultPrevented = emptyFunction.thatReturnsTrue;
      },
    

    This is related to how React use pooling on Synthetic events and because onTap is called asynchronously un the setState callback

    Reply
  • don’t reactivate the Tappable when moving back within the moveThreshold
    don’t reactivate the Tappable when moving back within the moveThreshold

    Sep 25, 2016

    Hi, I think when you move outside the moveThreshold the Tappable should stay inactive for the remainder of the move. Returning back to within the moveThreshold should not re-activate the Tappable. Do we agree this is the expected functionality? I'm referencing iOS behaviour. Touch an app and quickly move to the left or right triggering a swipe. Moving the app back to its original source and releasing your finger will NOT open the app.

    feature 
    Reply
  • Added Pinching support, fixed multi-touch bugs
    Added Pinching support, fixed multi-touch bugs

    Feb 22, 2015

    This has not been thoroughly tested, and one small improvement to be made has already been identified. Multiple touches are currently used in the given order, they should be re-ordered by identifier to be consistent.

    Reply
  • Support for React 0.14
    Support for React 0.14

    Jul 18, 2015

    I tried out React 0.14 today but was met with Uncaught TypeError: React.initializeTouchEvents is not a function

    Related: https://github.com/zilverline/react-tap-event-plugin/issues/24

    Reply
  • Remove useless line (i think)
    Remove useless line (i think)

    Aug 4, 2015

                var newComponentProps = Object.assign({}, props, {
                    style: style,
                    className: className,
                    disabled: props.disabled,
                    handlers: this.handlers
                }, this.handlers());
    

    I'm not sure but it seems to me this line handlers: this.handlers is useless right?

    Reply
  • Touch-to-stop-scroll also fires the tap event
    Touch-to-stop-scroll also fires the tap event

    Jun 17, 2015

    In native mobile apps, touching a scrollable container while momentum scrolling is in effect will immediately stop the scroll momentum, and prevent any tap events from firing on the elements inside the container.

    (by scrollable container, I mean an element with -webkit-overflow-scrolling:touch applied)

    Currently, react-tappable doesn't know that a momentum scroll is in progress, so it will treat the interaction like a normal tap event (which leads to a really broken user experience).

    I'm currently investigating whether we can detect scroll events in any way, and block the tap correctly. No idea (yet) how I'm actually going to fix this though.

    bug 
    Reply
  • 1.0.0
    1.0.0

    Jan 26, 2016

    @JedWatson I think we should this by now. This module is basically stable and in enough usage that we should already be using SEMVER properly.

    Lets do it :+1:

    question / help / docs 
    Reply
  • Should fix remaining React 15.x warnings
    Should fix remaining React 15.x warnings

    Jul 5, 2016

    • Should also fix #79
    Reply
  • Uncaught TypeError: Can't add property context, object is not extensible
    Uncaught TypeError: Can't add property context, object is not extensible

    Jan 30, 2015

    Just tried this in the reapp demo, and when I attempt to use the tag I get this. Figured I'd open this to see if you had any idea before I dug in.

    I get this super long stack trace (and slowdown in the devtools):

    Uncaught TypeError: Can't add property context, object is not extensibleReactCompositeComponent.js:136 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMultiChild.js:187 ReactMultiChild.Mixin.mountChildrenReactDOMComponent.js:251 ReactDOMComponent.Mixin._createContentMarkupReactDOMComponent.js:167 ReactDOMComponent.Mixin.mountComponentReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactCompositeComponent.js:187 ReactCompositeComponentMixin.mountComponentReactPerf.js:66 ReactPerf.measure.wrapperReactReconciler.js:38 ReactReconciler.mountComponentReactMount.js:232 mountComponentIntoNode
    
    Reply
  • event argument is not provided to onTap consistently
    event argument is not provided to onTap consistently

    Jun 18, 2015

    I've seen an error where the onTap event is not provided the event argument... it would seem that the React synthetic event is consistently passed through, but this bears review and testing.

    Reply