Use absolute dropdown but click didn't call onChange

[ChenShuy1]

I tried to use antd Select component for custom cell render, but I found the dropdown item's click didn't work... I guess it maybe emit container's click event but not in the dropdown's

expect: 1. click the dropdown item 2. call onChange 3. emit onCellEdited event

[ChenShuy1]

more information: like

[jassmith]

What version of GDG are you using?

[ChenShuy1]

What version of GDG are you using?

v5.0.0

[jassmith]

Are you using a custom cell or the one from the glide-data-grid-cells package?

Also there are some fixes in the 5.1.0 alphas you should test with.

[ChenShuy1]

Are you using a custom cell or the one from the glide-data-grid-cells package?

totally a custom cell, with Antd Select

[jassmith]

Can I have the source to the cell?

On Thu, Sep 8, 2022 at 6:50 PM chenshy39 @.***> wrote:

Are you using a custom cell or the one from the glide-data-grid-cells package?

totally a custom cell

— Reply to this email directly, view it on GitHub https://github.com/glideapps/glide-data-grid/issues/492#issuecomment-1241409223, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAHN24OF4B3PCXF74TVRHLV5KJX5ANCNFSM6AAAAAAQHR2H5E . You are receiving this because you commented.Message ID: @.***>

[ChenShuy1]

import {
  CustomCell,
  ProvideEditorCallback,
  CustomCellRenderer,
  getMiddleCenterBias,
} from '@glideapps/glide-data-grid';
import * as React from 'react';
import { Select } from 'antd';
import styles from './dropdowncell.less';

interface DropdownCellProps {
  readonly kind: 'dropdown-cell';
  readonly value: string;
  readonly options: { value: string; label: string }[];
  readonly readonly?: boolean;
}

export type DropdownCell = CustomCell<DropdownCellProps>;

const Editor: ReturnType<ProvideEditorCallback<DropdownCell>> = (p) => {
  const { value: cell, onFinishedEditing, initialValue } = p;
  const { options, value: valueIn } = cell.data;

  const [value, setValue] = React.useState(valueIn);

  return (
    <div className={styles.dropdowncell}>
      <Select
        open
        style={{ width: '100%' }}
        className="glide-select"
        value={value}
        options={options}
        getPopupContainer={() => document.getElementById('portal') || document.body}
        onSelect={() => {
          console.log('click');
        }}
        // did not emit
        onChange={(value: string) => {
          console.log('onChange', value); 
          if (value === null) return;
          setValue(value);
          onFinishedEditing({
            ...cell,
            data: {
              ...cell.data,
              value,
            },
          });
        }}
      />
    </div>
  );
};

const renderer: CustomCellRenderer<DropdownCell> = {
  isMatch: (c): c is DropdownCell => (c.data as any).kind === 'dropdown-cell',
  draw: (args, cell) => {
    const { ctx, theme, rect } = args;
    const { value } = cell.data;
    ctx.fillStyle = theme.textDark;
    ctx.fillText(
      value,
      rect.x + theme.cellHorizontalPadding,
      rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme),
    );
    return true;
  },
  provideEditor: () => ({
    editor: Editor,
    disablePadding: true,
    deletedValue: (v) => ({
      ...v,
      copyData: '',
      data: {
        ...v.data,
        value: '',
      },
    }),
  }),
  onPaste: (v, d) => ({
    ...d,
    value: d.options.map((i) => i.value).includes(v) ? v : d.value,
  }),
};

export default renderer;

[jassmith]

try setting overlayClassName="click-outside-ignore" on your Select.

[ChenShuy1]

but antd select do not support overlayClassName props, FYI: https://ant.design/components/select/#Select-props

[jassmith]

Sorry, popupclassname

On Thu, Sep 8, 2022 at 7:04 PM chenshy39 @.***> wrote:

but antd select do not support overlayClassName props, FYI: https://ant.design/components/select/#Select-props [image: image] https://user-images.githubusercontent.com/26213979/189256827-fc3f6e64-bb4e-4dbc-8446-0c478ed55865.png

— Reply to this email directly, view it on GitHub https://github.com/glideapps/glide-data-grid/issues/492#issuecomment-1241415465, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAHN27RV2ZVCVPEPPIIVTTV5KLMJANCNFSM6AAAAAAQHR2H5E . You are receiving this because you commented.Message ID: @.***>

[ChenShuy1]

Yes, it works!

[ChenShuy1]

Thanks a lot! 😭👍

[jassmith]

Yup I really need to document that.