mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 20:20:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Keyboard focus related bugs (#299)

Browse source 
* Focus when opening the emoji board and editing a message

* Clean emoji board after closing

* Focus room search and member search

* Resolve conversations
This commit is contained in:
ginnyTheCat 2022-02-08 12:43:59 +01:00 • committed by GitHub
parent d0e9728c26
commit cdd909f2dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/app/organisms/emoji-board/EmojiBoard.jsx
View file

@ -128,8 +128,7 @@ function SearchedEmoji() {
return <EmojiGroup key="-1" name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis.emojis} />;
}
function EmojiBoard({ onSelect }) {
const searchRef = useRef(null);
function EmojiBoard({ onSelect, searchRef }) {
const scrollEmojisRef = useRef(null);
const emojiInfo = useRef(null);
@ -182,8 +181,8 @@ function EmojiBoard({ onSelect }) {
setEmojiInfo({ shortcode: shortcodes[0], src, unicode });
}
function handleSearchChange(e) {
const term = e.target.value;
function handleSearchChange() {
const term = searchRef.current.value;
asyncSearch.search(term);
scrollEmojisRef.current.scrollTop = 0;
}
@ -213,9 +212,16 @@ function EmojiBoard({ onSelect }) {
setAvailableEmojis(packs);
};
const onOpen = () => {
searchRef.current.value = '';
handleSearchChange();
};
navigation.on(cons.events.navigation.ROOM_SELECTED, updateAvailableEmoji);
navigation.on(cons.events.navigation.EMOJIBOARD_OPENED, onOpen);
return () => {
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, updateAvailableEmoji);
navigation.removeListener(cons.events.navigation.EMOJIBOARD_OPENED, onOpen);
};
}, []);
@ -312,6 +318,7 @@ function EmojiBoard({ onSelect }) {
EmojiBoard.propTypes = {
onSelect: PropTypes.func.isRequired,
searchRef: PropTypes.shape({}).isRequired,
};
export default EmojiBoard;

8
src/app/organisms/emoji-board/EmojiBoardOpener.jsx
View file

@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import settings from '../../../client/state/settings';
import ContextMenu from '../../atoms/context-menu/ContextMenu';
import EmojiBoard from './EmojiBoard';
@ -10,6 +11,7 @@ let requestCallback = null;
let isEmojiBoardVisible = false;
function EmojiBoardOpener() {
const openerRef = useRef(null);
const searchRef = useRef(null);
function openEmojiBoard(cords, requestEmojiCallback) {
if (requestCallback !== null || isEmojiBoardVisible) {
@ -25,7 +27,9 @@ function EmojiBoardOpener() {
function afterEmojiBoardToggle(isVisible) {
isEmojiBoardVisible = isVisible;
if (!isVisible) {
if (isVisible) {
if (!settings.isTouchScreenDevice) searchRef.current.focus();
} else {
setTimeout(() => {
if (!isEmojiBoardVisible) requestCallback = null;
}, 500);
@ -46,7 +50,7 @@ function EmojiBoardOpener() {
return (
<ContextMenu
content={(
<EmojiBoard onSelect={addEmoji} />
<EmojiBoard onSelect={addEmoji} searchRef={searchRef} />
)}
afterToggle={afterEmojiBoardToggle}
render={(toggleMenu) => (