diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx index 2f6d9c2ea50a..fd8c85874ed2 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ComponentProps, createRef, useState } from "react"; +import React, { ComponentProps, createRef, useState, forwardRef } from "react"; import classNames from "classnames"; import { MatrixCall } from "matrix-js-sdk/src/webrtc/call"; @@ -48,30 +48,26 @@ type ButtonProps = Omit, "title" offLabel?: string; }; -const LegacyCallViewToggleButton: React.FC = ({ - children, - state: isOn, - className, - onLabel, - offLabel, - ...props -}) => { - const classes = classNames("mx_LegacyCallViewButtons_button", className, { - mx_LegacyCallViewButtons_button_on: isOn, - mx_LegacyCallViewButtons_button_off: !isOn, - }); +const LegacyCallViewToggleButton = forwardRef( + ({ children, state: isOn, className, onLabel, offLabel, ...props }, ref) => { + const classes = classNames("mx_LegacyCallViewButtons_button", className, { + mx_LegacyCallViewButtons_button_on: isOn, + mx_LegacyCallViewButtons_button_off: !isOn, + }); - return ( - - {children} - - ); -}; + return ( + + {children} + + ); + }, +); interface IDropdownButtonProps extends ButtonProps { deviceKinds: MediaDeviceKindEnum[];