Coder Social home page Coder Social logo

react-focus-within's Issues

Problem getting started with <FocusWithin>

This library is exactly what I need for a project. However, I can't get it to work at all for some reason. I have a very simple test script, which seems to just ignore the <button> focus completely:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import FocusWithin from 'react-focus-within'

class Test extends React.Component {
	render() {
		return <FocusWithin onFocus={() => console.log('focus pocus')}>{({ isFocused }) => (
			<button className={isFocused?'bg-success':'bg-primary'}>Go</button>
		)}</FocusWithin>
	}
}

ReactDOM.render(<Test/>, document.getElementById('app'))

I'm using react 16.8.5 and react-focus-within 2.0.1. Help would be greatly appreciated!

Bug: Getting TS error when using FocusWithin

When using FocusWithin, TS throws the following error:

TS2339: Property 'focusProps' does not exist on type 'FocusWithinRenderProps'.

It's happening because focusProps is missing in

export interface FocusWithinRenderProps {
    getFocusProps<P>(
        props?: P
    ): {
        onFocus(event: object): void
        onBlur(event: object): void
        onMouseDown(event: object): void
    } & P
    isFocused: boolean
}

react peerDep is outdated, causes npm installation issue

When running npm i when react-focus-within is a dependency, this error occurs and installation stops:

PS C:\Users\alexa\apf2> npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-focus-within
npm ERR!   react-focus-within@"2.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This forces to use npm i --force which is not recommended.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.