On Click Event Implement

NoriginMedia / Norigin-Spatial-Navigation

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs

MIT License

315 stars 94 forks source link

I am a Smart TV lead developer at Toffee the largest OTT in Bangladesh. I am using @noriginmedia/norigin-spatial-navigation in my react project. My application was already published in Samsung but WebOS (LG) was rejected due to some mouse navigation issues.

WebOS requirement: <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">

27 | P2 | 1.5. Remote Control | Magic remote Control | - | Execute app → Navigate and execute functions of app using Magic remote control | Check if it supports magic remote control ※ Check entire remote control Key >Check defined operation by Key ※ Check if App goes back to the previous status after the operation of the Key. | ※ Magic Remote Control support is required -- | -- | -- | -- | -- | -- | -- | -- 28 | P2 | 1.5. Remote Control | MMRC/Pointer | - | Execute app → Move Magic remote control screen cursor (pointer) in app screen | Cursor moves properly in accordance with Magic remote control movement | 29 | P2 | 1.5. Remote Control | MMRC/OK Key | - | Execute app → Use Magic remote control → Put pointer over on UI Button → Input OK Key | App moves properly when putting Magic remote control pointer over the UI button and press OK key | 30 | P2 | 1.5. Remote Control | MMRC/Wheel | Wheel function is supported | Execute app → Use Magic remote control wheel on Page/List scroll contents [CASE] 1. Check upper/lower, left/right movrment 2. If map is included, check zoom in/out function | Magic remote control wheel works properly in page/list scroll contents |

WebOS has two types of remote one MRCU and TRCU. So in MRCU have a mouse pointer with click, scroll, etc events. in your package, there is no click event available only enter is working. I want to add this click event to your package. When I try to implement it in my app I need to control it from my end. That's why I am thinking I adding this event to my package. Because this package is not compatible with LG TV requirements. If anyone uses it they need to configure all the custom events on their end.

Hello @foridpathan.

Edit: From what I understand you had sent an email regarding this and you were asked to open a PR -

Based on this I will try to be a bit more clear as to why I do not think this change should be introduced:

It is not always true that a PRESS and a CLICK should be handled in the same way / manner
It is not always true that a PRESSABLE item is also CLICKABLE, nor vice versa
Handling non-directional keys (e.g. onEnterPress) as part of the library is already a stretch in itself

As such we believe the interface we provide already exposes enough for any developer to be able to set up handling of click events as needed (f.ex. using the approach described below) without the library requiring this modification.

I hope this is a reasonable explanation. Thanks for getting in touch!

We have multiple LG WebOS applications in production using this library (that are fully validated by LG) and are able to handle all mouse / Magic Remote cases without any issues at all, so there should not be any limitations for you to make this work as expected.

Here's some small notes to hopefully guide you in the right direction of doing this without any library modifications:

When a div is hovered it triggers onMouseEnter - Calling focusSelf() here would make this item then gain focus
Adding an onClick handler will make clicking do something
- Alternatively use things like onMouseDown / onMouseUp, but this depends on your logic and expected behavior(s)

And here is a small example of this in a simple component:

import React from 'react';
import {useFocusable} from '@noriginmedia/norigin-spatial-navigation';

const MyFocusablePressableAndClickableButton = ({onEnterPressHandler}) => {
  const {focusSelf, ref} = useFocusable({ 
    onEnterPress: onEnterPressHandler
  });

  return <div 
    ref={ref} 
    onClick={onEnterPressHandler} // Let's make a CLICK do the same as a PRESS
    onMouseEnter={focusSelf} // Make component gain focus when the mouse is over it
  />;
};

Wrote this out relatively quickly, so pardon any small mistakes, but this is the general approach with which you should be able to have the same (e.g. clicking === pressing), or entirely different behaviors (e.g. clicking !== pressing), depending on what you need for your application.

I will close this as it is not really an issue nor a change we want to merge into the library, but best of luck with your coding!

NoriginMedia / Norigin-Spatial-Navigation

On Click Event Implement #126