question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No focusInput() in Input (react-native-ui-kitten 4.0.3)

See original GitHub issue

Issue type

I’m submitting a … (check one with “x”)

  • bug report
  • feature request

Issue description

Current behavior:

There is no focusInput() in the current version.

Expected behavior:

I want to be able to focus the Input programmatically.

Steps to reproduce:

  1. Use a simple input
  2. Assign the input to a ref
  3. Call focusInput() on ref

Related code:

import React, { useRef, useImperativeHandle, forwardRef } from "react";
import {
  Input as KittenInput,
  InputProps as KittenInputProps
} from "react-native-ui-kitten";

interface Props {}
export type InputProps = Props & KittenInputProps;

const InputComponent: React.FC<InputProps> = (props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      console.log("focus", inputRef.current.refs);
      inputRef.current.focusInput();
    }
  }));

  return <KittenInput ref={inputRef} {...props} />;
};

export const Input = forwardRef(InputComponent);

Other information:

OS, device, package version

"react-native-ui-kitten": "^4.0.3"

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
itsfabijanocommented, Jul 1, 2019

You are welcome! Thank’s for the quick response time. We’re switching from native-base to ui-kitten and we’re very excited about your framework. We’re on the verge of using it in production. 😃

1reaction
artyorshcommented, Jun 27, 2019

Looks like this is a global problem, related not only to an Input but for all components 😱 Working on this. Thanks again

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to set focus on an input field after rendering?
Set ref="nameInput" on my input field in the render function, and then call: this.refs.nameInput.getInputDOMNode().focus();. But where should I ...
Read more >
3 ways to autofocus an input in React that ALMOST always work!
This input is focus ed, but no text is selected. If the user starts typing, the text they type will go into that...
Read more >
Set Input Focus with HTML5 autofocus | SamanthaMing.com
Set Input Focus with HTML5 autofocus. Use the autofocus attribute on form elements to automatically focus the input field when the page loads....
Read more >
HTML input autofocus Attribute - W3Schools
The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads....
Read more >
HTMLElement.focus() - Web APIs | MDN
The HTMLElement.focus() method sets focus on the specified element, if it can ... If preventScroll is set to true , no scrolling will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found